Next.js + Stripe在Vercel部署时apiKey报undefined错误求助

• 首先纠正一个误区：Next.js 要求暴露给浏览器端使用的环境变量必须以 NEXT_PUBLIC_ 为前缀，你尝试的 NEXT_LOCAL 前缀无官方规则支持，无法生效。

具体修复步骤 #

1. 修改环境变量命名
   调整你的 .env.local 配置如下：

# Stripe
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=你的Stripe公钥
# 私钥仅服务端使用，不需要加NEXT_PUBLIC_前缀，避免泄露
STRIPE_SECRET_KEY=你的Stripe私钥

2. 调整Stripe初始化代码

• 前端客户端侧初始化Stripe时，使用 process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY 读取公钥
• 服务端（API路由、服务端组件）创建结账会话时，使用 process.env.STRIPE_SECRET_KEY 读取私钥，不要混淆公私钥的使用场景

3. 移除冗余配置
   删除 next.config.js 中手动配置的 env 字段，Next.js 9.4+ 版本会自动识别加载 .env.* 文件中的环境变量，手动映射反而容易出现命名不一致导致的读取失败问题。
4. 更新Vercel配置并重新部署

• 进入Vercel项目的环境变量配置页，删除原有的 STRIPE_PUBLIC_KEY，新增 NEXT_PUBLIC_STRIPE_PUBLIC_KEY 并填入对应公钥，STRIPE_SECRET_KEY 保持原有配置即可，注意不要在变量值前后加多余的空格、引号
• 配置完成后必须重新触发一次全量部署，Vercel的环境变量修改不会对已部署的版本生效

排查验证 #

你可以在本地先执行 npm run build 再执行 npm start 模拟生产环境运行，如果本地生产环境可以正常创建结账会话，部署到Vercel后即可正常运行。 #

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