Next.js与Heroku配置变量失效问题排查
2026-8-5
问题分析与解决办法
核心问题
你在.env.production里的写法完全错误——Next.js的.env系列文件不支持在值里写process.env.API_KEY这种引用逻辑，它只能直接写具体的变量值，或者依赖平台（这里是Heroku）直接注入环境变量。
本地能正常运行是因为你的.env.local直接给NEXT_PUBLIC_ENV_LOCAL_INFURA_API_KEY赋了具体的密钥值，而Heroku那边因为.env.production的写法无效，根本没拿到正确的API密钥。
解决步骤
删除
.env.production里的错误配置行
直接移除NEXT_PUBLIC_ENV_LOCAL_API_KEY=process.env.API_KEY这一行，不需要在这个文件里写任何引用逻辑。在Heroku上配置环境变量
登录Heroku后台，找到你的应用，进入「Settings」页面，拉到「Config Vars」区域：
- 如果这个API密钥需要在客户端代码（比如组件、页面前端逻辑）里使用，就添加变量：
- 键：
NEXT_PUBLIC_ENV_LOCAL_API_KEY - 值：你的实际API密钥（比如
0000011111122222233333）
- 键：
- 如果密钥只在服务端代码（比如API路由、
getServerSideProps等）里用，不需要NEXT_PUBLIC_前缀，直接添加：- 键：
API_KEY - 值：你的实际API密钥
- 键：
- 在代码里直接调用对应变量
- 客户端场景用：
process.env.NEXT_PUBLIC_ENV_LOCAL_API_KEY - 服务端场景用：
process.env.API_KEY
Heroku会在应用构建和运行阶段自动把这些配置变量注入环境中，Next.js能直接读取，不需要额外配置。
内容的提问来源于stack exchange，提问作者Maks
相关产品推荐
相关产品推荐
