Next.js部署开发服务器如何使用.env.development环境变量？

Next.js 13.4及以上版本支持通过--env-file参数强制指定加载的环境变量文件，这可以解决你在开发服务器部署时需要加载.env.development的问题，无需复制文件覆盖。

修改package.json脚本 #

将你的脚本更新为以下内容，同时指定环境变量文件和NODE_ENV：

"scripts": {
  "build:dev": "NODE_ENV=development next build --env-file .env.development && next export",
  "start:dev": "NODE_ENV=development next start --env-file .env.development"
}

关键说明 #

• --env-file .env.development：强制Next.js在构建和启动阶段加载指定的环境变量文件，忽略默认的.env.production优先级。
• NODE_ENV=development：保持开发环境的行为模式（比如禁用部分生产优化、保留调试信息），同时配合--env-file确保加载正确的变量。

跨平台兼容（可选） #

如果你的团队使用Windows系统，直接设置NODE_ENV会有语法问题，可以使用cross-env包统一跨平台的环境变量设置：

1. 安装依赖：npm install cross-env --save-dev
2. 修改脚本：

"scripts": {
  "build:dev": "cross-env NODE_ENV=development next build --env-file .env.development && next export",
  "start:dev": "cross-env NODE_ENV=development next start --env-file .env.development"
}

为什么之前的方法无效？ #

Next.js的构建(next build)和启动(next start)逻辑中，即使设置了NODE_ENV=development，默认仍会优先加载.env.production文件。只有通过--env-file参数才能强制覆盖这个默认行为，确保加载你需要的.env.development变量。

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