如何配置Heroku环境变量使其可在Next.js应用中正常读取

问题核心原因 #

Next.js 对环境变量有严格的访问权限控制：

• 带 NEXT_PUBLIC_ 前缀的变量，会在构建阶段被嵌入到客户端 bundle 中，浏览器端运行的代码可以正常读取
• 不带此前缀的变量，默认仅能在 Node.js 服务端执行的代码中访问，客户端代码直接读取会返回 undefined

你目前遇到的日志输出完全符合这个规则：NEXT_PUBLIC_CURRENT_ENV 读取到了 .env.production 中配置的 PRODUCTION，而不带前缀的 CURRENT_ENV 因为是客户端逻辑调用，所以返回 undefined，Heroku 配置的变量没有生效。

解决方案 #

根据你的使用场景二选一即可：

方案1：变量需要在客户端直接访问（适配你渲染页面横幅的需求）

1. 进入 Heroku 应用后台的设置页，删除原有的 CURRENT_ENV 变量，新增同名但带前缀的变量：NEXT_PUBLIC_CURRENT_ENV，值对应填写 REVIEW/STAGING/PRODUCTION
2. 简化环境判断逻辑即可，带前缀的变量客户端、服务端都能正常读取：

const getCurrentEnv = (): string => {
  return process.env.NEXT_PUBLIC_CURRENT_ENV ?? 'PRODUCTION';
};

3. 必须操作：修改完 Heroku 环境变量后，需要重新触发应用部署，让 Next.js 构建阶段拉取最新的变量值嵌入到产物中，仅重启 dyno 不会生效。

注：Heroku 配置的系统环境变量优先级高于本地 .env 系列文件中的配置，你本地 .env.production 里的默认值不会覆盖 Heroku 上配置的对应环境的值，不用担心冲突。

方案2：不希望变量暴露给客户端

如果该环境标识仅用于服务端逻辑，你可以把横幅的渲染逻辑放到服务端执行：比如用 Pages Router 的 getServerSideProps 或者 App Router 的服务端组件读取不带前缀的 CURRENT_ENV 变量，把值作为 props 传给客户端组件渲染即可，不需要修改 Heroku 上的变量名。

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