如何在Vercel中为不同环境指定对应.env文件？

你遇到的核心问题是Vercel默认的环境分支映射逻辑与Next.js的.env文件加载规则不匹配：Vercel会把除main外的分支默认归类为Preview环境，且默认给Preview环境设置NODE_ENV=production，导致Next.js加载了.env.production而非.env.development。以下是具体解决步骤：

1. 为Vercel分支配置对应NODE_ENV #

• 进入你的Vercel项目后台，打开「Settings」→「Environment Variables」页面
• 添加针对development分支的环境变量：
  • 变量名：NODE_ENV，变量值：development
  • 在变量的配置选项中，将「Environment」选择为「Preview」，「Git Branch」指定为development
• main分支保持默认的NODE_ENV=production即可

2. 确认Next.js的.env加载逻辑 #

Next.js会根据NODE_ENV的值自动加载对应环境文件：

• 当NODE_ENV=development时，会优先加载.env.development，再加载.env.local（后者变量会覆盖前者）
• 当NODE_ENV=production时，会优先加载.env.production，再加载.env.local
  确保你的.env文件名拼写完全正确，没有大小写或后缀错误

3. 自定义环境的进阶设置（可选） #

如果需要单独的预发布（staging）环境而非复用development环境：

• 在Vercel中创建自定义环境（比如命名为staging）
• 为该环境设置NODE_ENV=staging，并关联对应的git分支
• 在项目中添加.env.staging文件，Next.js会自动识别并加载

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