部署到Heroku的Next.js项目NEXT_PUBLIC环境变量不生效问题求助

本地运行始终显示.env.local取值的原因 #

Next.js 本地开发环境下，.env.local 是优先级最高的环境变量配置文件，会覆盖所有系统级、平台注入的同名称环境变量，本地运行读到此值属于设计特性。
如果本地需要测试其他取值，直接修改.env.local对应配置即可，或临时删除.env.local文件读取系统环境变量中的同名配置。

Heroku 生产环境取值不生效的核心原因 #

所有带NEXT_PUBLIC_前缀的Next.js环境变量，是构建阶段被直接硬编码到最终输出的静态/服务端代码中的，不会在运行时动态读取平台注入的环境变量。你在Heroku后台配置完变量后没有重新触发项目构建，线上运行的还是旧构建产物，内置的还是之前.env.local里的取值。
如果你的.env.local文件没有被加入.gitignore，被提交到了代码仓库，Heroku构建时会优先读取仓库内的.env.local配置，同样会覆盖Heroku后台注入的Config Vars值。

完整修复步骤 #

• 先把.env.local加入项目根目录的.gitignore文件，避免敏感配置提交到代码仓库
• 如果已经提交过.env.local到仓库，执行以下命令从git记录中移除该文件：

  git rm --cached .env.local
  

  提交上述修改到关联Heroku的代码仓库
• 确认Heroku后台Config Vars中NEXT_PUBLIC_CODER_MESSAGE的取值正确
• 触发一次Heroku项目的重新构建：可以推送新的commit到关联仓库，也可以在Heroku后台「Deploy」标签页手动点击「Manual Deploy」触发构建
• 构建完成后清空浏览器缓存访问即可生效

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