Next.js v13.1.1部署后环境变量在浏览器中失效求助

核心问题分析 #

你遇到的问题本质是：本地.env文件被Git忽略（这是正确的安全做法），导致Vercel部署时无法获取这些变量；同时你的next.config.js存在冗余配置，反而可能干扰变量的正常暴露。

分步解决步骤 #

1. 清理next.config.js的冗余配置 #

Next.js v9+版本中，带NEXT_PUBLIC_前缀的环境变量会自动暴露给客户端代码，不需要在next.config.js的env字段中手动配置。请删除next.config.js中类似以下的代码：

module.exports = {
  env: {
    WEB_CLIENT_ID: process.env.WEB_CLIENT_ID // 删掉这一行及相关配置
  }
}

若next.config.js有其他配置，保留即可，仅移除env字段中关于WEB_CLIENT_ID的部分。

2. 本地验证变量可用性 #

确保本地的.env.local、.env.development、.env.production文件中，变量名严格以NEXT_PUBLIC_开头：

NEXT_PUBLIC_WEB_CLIENT_ID=2341-2a29v1i7ov6.apps.googleusercontent.com

重启本地开发服务器（执行npm run dev或yarn dev，无需重启VS Code），在_app.tsx中直接通过process.env.NEXT_PUBLIC_WEB_CLIENT_ID读取变量，打印到控制台确认本地正常：

// _app.tsx
console.log('Client ID:', process.env.NEXT_PUBLIC_WEB_CLIENT_ID);
// 用于GoogleOAuthProvider
<GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_WEB_CLIENT_ID || ''}>
  {/* 你的应用内容 */}
</GoogleOAuthProvider>

3. 在Vercel后台配置环境变量 #

因不能将.env文件提交到Git（避免敏感信息泄露），需在Vercel项目设置中手动添加环境变量：

• 登录Vercel进入目标项目页面
• 点击顶部导航的Settings，选择左侧菜单的Environment Variables
• 点击Add按钮，输入：
  • Key: NEXT_PUBLIC_WEB_CLIENT_ID
  • Value: 你的Google Client ID（即2341-2a29v1i7ov6.apps.googleusercontent.com）
  • 勾选Production、Preview、Development三个环境（确保所有部署环境都能获取变量）
• 点击Save保存配置

4. 重新部署项目 #

Vercel会自动检测环境变量变更并触发重新部署，若未自动触发，可手动操作：

• 进入项目的Deployments页面
• 选择最新部署记录，点击右侧的Redeploy按钮

5. 验证部署结果 #

部署完成后，打开浏览器访问你的Vercel应用：

• 打开控制台（F12），查看是否能打印出正确的NEXT_PUBLIC_WEB_CLIENT_ID值
• 检查GoogleOAuthProvider是否能正常初始化

关键注意事项 #

• 永远不要将.env文件提交到Git，默认的.gitignore已包含这些文件，保持该配置以避免敏感信息泄露
• 仅客户端代码需要访问的变量才需加NEXT_PUBLIC_前缀，服务端专用变量无需添加该前缀，也不会暴露给浏览器
• 确保Vercel的环境变量名称与本地完全一致（包括大小写）

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