求助：Cloudflare忽略Heroku环境变量导致值为undefined

检查环境变量命名规则 #

• 若在客户端组件（页面、浏览器端运行的组件代码）中使用环境变量，必须以NEXT_PUBLIC_为前缀，比如NEXT_PUBLIC_API_KEY。Heroku配置的变量名要严格匹配该规则，否则Next.js不会将变量注入客户端代码，最终导致undefined。
• 服务端组件、API路由使用的变量无需该前缀，但要确保Heroku已正确配置，且dyno已重启加载新变量。

确认Heroku环境变量生效 #

• 登录Heroku控制台进入应用，在Settings的Config Vars中核对变量存在且值正确。
• 执行命令heroku run printenv --app <你的应用名>，在终端检查变量是否能正常输出。若输出为空，重新添加变量后执行heroku restart --app <你的应用名>重启dyno。

调整Cloudflare缓存策略 #

• Cloudflare默认缓存静态资源，若你的页面是SSG（静态生成）或ISR（增量静态再生），旧缓存页面可能未包含最新环境变量。
• 在Cloudflare域名控制台，进入缓存->缓存规则，添加规则：
  • 匹配条件：路径设为/*（或你的动态页面路径）
  • 缓存行为：设置为不缓存，或针对动态内容启用缓存键排除，确保请求直达Heroku获取最新内容。
• 手动清除Cloudflare缓存：进入缓存->配置，点击清除缓存并选择清除所有缓存。

检查Next.js构建部署方式 #

• 确保在Heroku服务器上完成构建，而非本地构建后再部署。本地构建会打包本地环境变量，而非Heroku配置的变量。
• 若使用Heroku自动构建，确认构建过程中Heroku环境变量已可用——Next.js在构建时会将NEXT_PUBLIC_前缀的变量注入静态资源，构建时变量缺失会导致静态文件中出现undefined。

验证Cloudflare代理状态 #

• 在Cloudflare DNS设置中，查看指向Heroku的CNAME记录代理状态：
  • 若为橙色云朵（代理模式），需确保请求头未被篡改，且SSL/TLS模式设为灵活或完全，与Heroku的SSL配置兼容。
  • 可临时切换为灰色云朵（仅DNS模式）测试，若变量恢复正常，说明代理设置存在问题，需排查页面规则或SSL配置。

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