搭载Node.js后端的Next.js应用静态导出时能否使用dot-env？

结论：可以用，但要严格区分客户端环境变量和后端（Azure Function）环境变量的使用场景，同时注意静态导出的限制。

1. 客户端侧环境变量（Next.js静态页面） #

Next.js静态导出后，所有页面会编译为纯静态资源（HTML/JS/CSS），仅能访问以NEXT_PUBLIC_前缀开头的环境变量：

• 无需额外安装dotenv包，Next.js默认会自动加载项目根目录下的.env、.env.production等环境变量文件。
• 使用方式：在组件中直接通过process.env.NEXT_PUBLIC_XXX调用，比如：

  // 调用Azure Function的API地址
  const apiUrl = process.env.NEXT_PUBLIC_AZURE_FUNCTION_API_URL;
  

• 注意：这类变量会被直接嵌入到客户端代码中，绝对不能存放敏感信息（如API密钥、数据库密码），否则会被任何人通过查看源码获取。

2. 后端侧环境变量（Azure Function） #

Azure Function作为独立的Node.js后端，环境变量需单独管理：

• 本地开发时：可以在Function项目根目录创建.env文件，安装dotenv包后在函数入口文件顶部加载：

  require('dotenv').config();
  // 使用敏感变量
  const secretKey = process.env.AZURE_FUNCTION_SECRET_KEY;
  

• 部署到Azure后：直接在Azure门户的「Function App」→「配置」→「应用程序设置」中添加环境变量，无需依赖.env文件。
• 注意：后端的敏感变量永远不要暴露给前端，仅在Azure Function内部使用，通过API接口向前端返回处理后的结果。

3. 静态导出的关键限制 #

• 静态导出过程中，Next.js的服务端渲染方法（如getServerSideProps、getInitialProps）无法运行，因此非NEXT_PUBLIC_前缀的环境变量不会被处理，也无法在客户端访问。
• 如果构建阶段需要使用环境变量生成静态内容（如构建时的配置参数），可以放在.env文件中，但同样不能包含敏感信息，否则会被打包到静态资源中。

内容的提问来源于stack exchange，提问作者shifoc