Vercel生产环境下NEXT_PUBLIC_OPENAI_API_KEY为空的问题排查与解决

项目配置 #

• 基于OpenAI API开发的Next.js项目
• 环境变量：NEXT_PUBLIC_OPENAI_API_KEY
• 本地已在.env.local文件中正确配置该变量
• Vercel控制台已完成变量配置（已反复确认）

问题现象 #

生产环境中，process.env.NEXT_PUBLIC_OPENAI_API_KEY返回空字符串，导致API调用失败。

代码示例 #

const prompt = generatePrompt(scores);
console.log(prompt);
console.log("calling openAI");
let apiKey: string = process.env.NEXT_PUBLIC_OPENAI_API_KEY ?? "";
console.log('Using API Key:', apiKey); // 生产环境日志显示空字符串

const response = await fetch('https://api.openai.com/v1/chat/completions', {
  // ... API调用配置
});

临时解决方法 #

硬编码API密钥后可正常运行：

if (apiKey === "") {
  console.log("hardcoding api key");
  apiKey = "sk-..."; // 硬编码的API密钥
}

已尝试操作 #

• 在Vercel控制台删除并重新添加环境变量
• 确认变量在Vercel项目设置中的名称、值均配置正确
• 本地开发环境可正常读取该变量，功能运行正常

咨询问题 #

为何process.env.NEXT_PUBLIC_OPENAI_API_KEY在Vercel生产环境中为空？该如何解决此问题？

解决建议 #

1. 检查Vercel环境关联
   确认Vercel控制台中配置的环境变量是否关联到当前生产分支（如main/master）。若变量仅配置在预览环境，生产环境无法读取。
2. 重新触发生产部署
   环境变量修改后需重新部署才会生效。可在Vercel控制台手动触发重新部署，或推送空提交触发：

   git commit --allow-empty -m "Trigger Vercel redeploy"
   git push origin main
   

3. 验证Next.js版本
   部分旧版Next.js对NEXT_PUBLIC_前缀变量的处理存在兼容问题，确保使用稳定版最新版本。
4. 排查代码变量覆盖
   检查项目中是否有其他逻辑意外覆盖了process.env.NEXT_PUBLIC_OPENAI_API_KEY的值，导致其为空。
5. 优化密钥存储逻辑（重要）
   NEXT_PUBLIC_前缀变量会暴露到客户端，OpenAI密钥属于敏感信息，不应前端暴露。建议将API调用移至Next.js的API路由（pages/api或app/api），在服务端使用不带NEXT_PUBLIC_前缀的环境变量，彻底避免密钥泄露风险。

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