Vercel部署Next.js项目提示auth/invalid-api-key错误如何解决

故障排查清单 #

• 首先检查Vercel项目的环境变量配置：本地你会在.env.local里存储Firebase的API Key等配置，但Vercel不会自动读取你本地的.env文件，你需要手动在Vercel控制台对应项目的「Settings > Environment Variables」里把所有Firebase相关的环境变量都填进去，注意变量名必须和你代码里引用的完全一致，比如你代码里用的是process.env.NEXT_PUBLIC_FIREBASE_API_KEY，Vercel里的变量名就必须完全是这个字符串，不能多字符少字符。
• 注意Next.js的环境变量暴露规则：如果你是在客户端组件（带'use client'标记的组件）里引用Firebase配置，变量名必须以NEXT_PUBLIC_前缀开头，否则服务端构建的时候根本读不到这个变量，会返回undefined，自然就会报invalid-api-key的错误。
• 检查环境变量值是否正确：复制粘贴的时候不要带多余的空格、引号或者换行符，很多人复制的时候不小心把本地.env里的引号也粘进去了，Vercel的环境变量不需要额外加引号包裹，直接填纯字符串即可。
• 检查部署是否刷新了配置：你填完Vercel的环境变量之后，必须重新触发一次部署才能生效，之前已经在构建队列里或者失败的构建用的还是旧的环境变量配置，新配置不会回溯生效。
• 特殊场景排查：如果你用了服务端组件/接口调用Firebase Admin，不要把客户端的API Key给Admin SDK用，Admin需要的是服务账号的私钥配置，和客户端的API Key是两套体系，混用时也会报这个错误。
• 临时调试方法：你可以在Firebase初始化的代码前加一行console.log('Firebase API Key:', process.env.NEXT_PUBLIC_FIREBASE_API_KEY)，部署之后看Vercel的构建日志或者运行时日志，确认变量是不是真的被正确读取到了，如果输出是undefined，就肯定是环境变量配置的问题。

内容的提问来源于stack exchange，提问作者Omar Al Seddik