Next.js部署GCP时next.config.js无法读取process.env变量问题

核心原因分析 #

next.config.js是在构建阶段执行的配置文件，而next-i18next.config.js的加载时机可兼容运行时环境变量。如果你的GCP部署流程仅在运行时注入GCP_SERVICE变量，next.config.js在构建时自然读不到；反之如果是构建时注入但传递方式有误，也会导致变量无法读取。

具体解决方案 #

1. 确认环境变量的注入阶段

确保GCP_SERVICE是在构建阶段传递给Next.js的，而非仅在运行时设置：

• 检查你的app.yml配置，在Cloud Build的构建步骤中，显式将变量注入到npm run build的执行环境中，示例配置：

  steps:
    # 先调试验证变量是否传递成功
    - name: 'node:18'
      args: ['echo', '构建时GCP_SERVICE变量值: $GCP_SERVICE']
    # 构建时注入变量
    - name: 'node:18'
      args: ['npm', 'run', 'build']
      env:
        - 'GCP_SERVICE=${_GCP_SERVICE}'
  

  这里的${_GCP_SERVICE}是从CD流程的参数中传入的变量，确保你的cd-one/two/three.yaml中正确传递了这个参数。

2. 验证构建时变量是否存在

在Cloud Build的日志中查看上述echo步骤的输出，确认GCP_SERVICE变量值是否正确（one/two/three）。如果日志中没有输出对应值，说明变量没有正确传递到构建阶段，需要检查CD流程和app.yml的参数传递逻辑。

3. 修正next.config.js的变量读取逻辑

确保代码中正确读取环境变量，且没有大小写或拼写错误，同时可以添加日志便于排查：

// next.config.js
const currentService = process.env.GCP_SERVICE || 'default';
console.log('构建时识别到的服务:', currentService); // 日志会出现在Cloud Build中

module.exports = {
  // 根据currentService配置对应逻辑
  env: {
    // 如果需要暴露给客户端，可在这里映射
    NEXT_PUBLIC_SERVICE: currentService,
  },
  // 其他配置...
};

查看Cloud Build日志中的构建时识别到的服务输出，确认变量是否被正确读取。

4. 区分构建时与运行时变量

如果你的业务需要在运行时动态切换配置，而非构建时固定，那么不能在next.config.js中依赖环境变量。这种情况下，建议将动态配置逻辑移到运行时的API路由或组件中，直接读取运行时环境变量。

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