Next.js本地项目中OpenAI API无法读取.env.local密钥问题求助

• 环境变量未被Next.js正确加载
  Next.js读取.env.local需满足以下条件：

  1. 文件必须放在项目根目录，不能置于子文件夹内
  2. 修改.env.local后必须重启Next.js开发服务器，否则新变量不会生效
  3. 若在客户端组件中使用环境变量，变量名必须以NEXT_PUBLIC_为前缀（如NEXT_PUBLIC_OPENAI_API_KEY）——但需注意：直接在客户端调用OpenAI API会导致密钥泄露，属于不安全操作，建议通过Firebase Cloud Functions作为中间层转发请求。

• 环境变量格式错误
  .env.local中的变量值无需添加单/双引号，正确格式应为OPENAI_API_KEY=sk-xxxxxx。添加引号会导致变量值包含引号本身，传递给OpenAI时因密钥无效返回401错误。

• Firebase部署环境未配置对应变量
  本地.env.local不会自动同步到Firebase部署环境，需在Firebase控制台的项目设置中添加对应环境变量，或通过Firebase CLI命令firebase functions:config:set openai.api_key="sk-xxxxxx"完成配置（若使用Cloud Functions）。

• 代码执行环境存在安全隐患
  若这段代码在客户端组件中运行，即便变量加载成功，直接在前端调用OpenAI API不仅会触发跨域问题，还会导致密钥暴露在浏览器开发者工具中，存在严重安全风险。正确做法是将OpenAI API调用逻辑放在Firebase Cloud Functions中，前端仅调用自身的Cloud Functions接口。

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