Next.js部署至Vercel后API请求返回500错误（本地运行正常）

我来帮你梳理这个问题，结合部署Next.js到Vercel的实际经验，先排查错误原因，再分享有效的调试方法：

一、排查API路由500错误的核心原因 #

1. 环境变量的阶段差异问题 #

你提到getStaticProps能正常连接数据库，但它是在构建阶段执行的，而API路由属于运行时函数，两者依赖的环境变量可能不一致：

• 检查Vercel控制台的「Settings > Environment Variables」：
  • 确保数据库连接字符串（比如MONGODB_URI）没有使用NEXT_PUBLIC_前缀（这个前缀是暴露给客户端的，绝对不能用于敏感的服务端配置）。
  • 确认变量的「Environment」选项勾选了Production，修改后必须重新部署应用（Vercel不会自动刷新已部署函数的环境变量）。
• 可以在API路由里先验证环境变量是否加载：

  console.log('数据库连接串是否存在:', !!process.env.MONGODB_URI);
  

2. 查询参数处理不完整 #

你的前端useEffect传递的query对象可能包含price之外的参数（比如deletedAt、archivedAt），但API路由只处理了price，未过滤的参数直接传入Property.find()会导致MongoDB抛出查询语法错误：

• 建议统一处理所有预期参数，同时保留getStaticProps里的基础过滤条件：

  let queryCond = {
    deletedAt: { $exists: false },
    archivedAt: { $exists: false } // 和静态渲染保持一致的基础条件
  };
  const { price } = req.query;
  if (price) {
    queryCond.price = { $lte: Number(price) }; // 用Number()替代隐式转换，更可靠
  }
  // 按需添加其他参数的处理逻辑，比如面积、房型等
  

3. 请求路径配置错误 #

检查process.env.NEXT_PUBLIC_BASE_URL在生产环境的取值：

• 如果部署后的域名是https://your-app.vercel.app，BASE_URL不要末尾加斜杠，否则拼接后会出现//api/properties的错误路径，触发404后被系统处理为500错误。
• 可以在前端打印完整请求URL验证：

  const url = `${process.env.NEXT_PUBLIC_BASE_URL}/api/properties?${new URLSearchParams(query)}`;
  console.log('请求URL:', url);
  const filteredProperties = await fetch(url);
  

二、有效调试Vercel API路由的方法 #

1. 查看Vercel函数日志 #

• 登录Vercel控制台，进入项目后点击左侧菜单的「Functions」，找到api/properties函数，就能看到所有请求的日志（包括console.log输出和完整错误栈）。
• 用Vercel CLI查看实时日志：

  vercel logs --follow
  

  这个命令会实时输出所有函数的日志，涵盖开发和生产环境。

2. 本地模拟生产环境调试 #

• 不要用next dev，改用vercel build && vercel start命令，它会模拟Vercel的生产运行时，能发现本地开发时隐藏的问题（比如环境变量、路由匹配、依赖安装差异）。
• 开启调试模式：vercel dev --debug，注意API路由的日志会输出在Vercel CLI终端，而非Next.js的终端窗口。

3. 返回详细错误信息 #

修改API路由的catch块，返回更具体的错误内容，方便前端排查：

catch (err) {
  console.error('API错误详情:', err); // 日志会记录完整错误栈
  res.status(500).json({ 
    status: 500, 
    message: err.message, 
    stack: process.env.NODE_ENV === 'development' ? err.stack : undefined 
  });
}

4. 检查构建日志 #

如果API路由根本没执行，可能是构建阶段出了问题。在Vercel控制台的「Deployments」里，点击对应部署记录查看「Build Logs」，确认API路由是否被正确打包。

内容的提问来源于stack exchange，提问作者Adam Ilčišák