如何在Next.js运行时更新环境变量？

方法一：使用dotenv-cli（推荐，无需额外代码） #

• 安装dotenv-cli依赖：

npm install dotenv-cli --save-dev

• 在package.json中添加对应环境的启动脚本：

{
  "scripts": {
    "build": "next build",
    "start:dev": "dotenv -e .env.dev next start",
    "start:qa": "dotenv -e .env.qa next start",
    "start:stg": "dotenv -e .env.stg next start",
    "start:prod": "dotenv -e .env.production next start"
  }
}

• CI/CD流程中，先执行npm run build生成生产构建包，再根据目标环境选择对应启动命令（比如QA环境执行npm run start:qa）。

方法二：自定义启动脚本（灵活可控） #

如果需要动态传递环境文件名，可通过Node.js脚本实现：

• 安装dotenv依赖：

npm install dotenv --save

• 在项目根目录创建start.js文件：

const dotenv = require('dotenv');
const { spawn } = require('child_process');

// 读取命令行传入的环境文件名，默认使用.env.production
const envFile = process.argv[2] || '.env.production';

// 加载指定的环境变量文件
dotenv.config({ path: envFile });

// 启动Next.js生产服务器
const nextStart = spawn('npx', ['next', 'start'], {
  stdio: 'inherit',
  env: { ...process.env }
});

nextStart.on('close', (code) => {
  process.exit(code);
});

• 在package.json中添加启动脚本：

{
  "scripts": {
    "build": "next build",
    "start": "node start.js"
  }
}

• CI/CD执行时，完成构建后通过npm run start .env.qa这种形式指定环境文件启动服务。

关键注意事项 #

• 需在客户端暴露的环境变量，必须以NEXT_PUBLIC_为前缀，否则客户端无法读取。
• 服务器端敏感变量不要添加NEXT_PUBLIC_前缀，防止泄露。
• 运行时加载的环境变量会覆盖构建时注入的同名变量，因为Node.js的process.env优先级更高。

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