Next.js：如何为开发环境与构建环境设置不同环境变量？

用.env文件直接区分环境 #

Next.js 默认支持按环境加载对应的.env配置文件：

• 开发环境：在项目根目录创建 .env.development，专门放开发时用的变量
• 生产构建环境：创建 .env.production，存放构建后生产环境要用的变量

变量命名要注意 #

• 如果变量需要在浏览器端（比如组件里）使用，必须以 NEXT_PUBLIC_ 开头，比如 NEXT_PUBLIC_API_BASE_URL
• 只在服务端用的变量（比如数据库连接串、密钥）不用加前缀，直接写就行，比如 DB_PASSWORD

具体操作步骤 #

1. 创建对应环境的.env文件
   • .env.development 示例：

     NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
     DB_HOST=127.0.0.1
     

   • .env.production 示例：

     NEXT_PUBLIC_API_BASE_URL=https://your-prod-domain.com/api
     DB_HOST=prod-db.your-domain.com
     

2. 在代码里调用变量
   • 浏览器端组件：直接用 process.env.NEXT_PUBLIC_API_BASE_URL
   • 服务端场景（比如API路由、getServerSideProps、getStaticProps）：直接用 process.env.DB_HOST

启动/构建时自动加载对应配置 #

• 运行开发服务器，自动加载 .env.development：

  npm run dev
  

• 构建生产版本，自动加载 .env.production：

  npm run build
  

额外小技巧 #

• 如果需要测试环境，可以创建 .env.test，然后通过指定NODE_ENV来加载：

  NODE_ENV=test npm run dev
  

• 记得把 .env* 加到 .gitignore 里，别把敏感配置提交到代码仓库，可以留个 .env.example 作为示例给其他开发者参考

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