Vercel构建NextJS应用时.env.local报错问题咨询

可能的原因 #

• .env.local文件丢失或路径错误：NextJS默认会加载项目根目录下的.env.local文件，若文件被误删除、移动到其他目录，就会导致无法读取环境变量。
• MONGODB_URI变量被意外修改/清空：你以为没修改过文件，但可能存在误操作（比如不小心删除行、注释掉变量），导致变量缺失。
• 编译与运行阶段的环境变量使用差异：编译阶段可能没用到MONGODB_URI，所以编译成功；但收集页面数据时（比如服务端渲染、静态生成的getStaticProps/getServerSideProps）需要调用数据库，这时才会读取该变量，触发报错。
• 部署环境的配置问题：如果是在生产环境部署，可能部署平台没有同步.env.local文件，或者平台的环境变量配置覆盖了本地文件，导致变量未被正确加载。
• NextJS配置变更：若你修改过next.config.js中的环境变量相关配置（比如env字段、experimental.appDir的env设置），可能改变了默认的环境变量加载逻辑。

解决步骤 #

• 检查项目根目录是否存在.env.local文件，若不存在，新建文件并添加：

  MONGODB_URI=你的MongoDB连接字符串
  

• 打开已存在的.env.local，确认MONGODB_URI变量格式正确：没有多余引号、注释符号，连接字符串完整。
• 重启NextJS开发服务器（生产环境则重新部署并确保环境变量配置正确），环境变量修改后需要重启才能生效。
• 若使用部署平台（如Vercel、Netlify），检查平台控制台的环境变量设置，确认MONGODB_URI已正确配置（部分平台优先读取平台设置的变量，而非本地.env文件）。
• 查看next.config.js，确认没有修改默认的环境变量加载逻辑，若有自定义配置，检查是否导致.env.local被忽略。

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