Next.js+MongoDB部署Vercel后API接口404问题求助

1. 修正API访问路径 #

你访问https://vercel.app/api/显示404是正常的——因为你的实际接口是/api/user，正确的访问地址应该是：

https://<你的Vercel项目域名>/api/user?name=xxx

直接访问根/api/没有对应的route.ts文件，必然返回404。

2. 修正生产环境API地址配置 #

你的.env中NEXT_PUBLIC_API_URL设置为http://localhost:3000/api，这在生产环境会导致前端请求指向本地，无法访问Vercel上的API。需要修改为：

NEXT_PUBLIC_API_URL=https://<你的Vercel项目域名>/api

并在Vercel的环境变量中同步更新这个值，更新后必须重新部署项目才能生效。

3. 完善数据库连接逻辑 #

当前的connectDb函数错误处理过于简略，无法定位连接失败原因，且没有避免重复连接的逻辑，修改如下：

// utils/database.ts
import mongoose from "mongoose";

export const connectDb = async () => {
  try {
    const url = process.env.MONGODB_URI;
    if (!url) {
      throw new Error("MONGODB_URI环境变量未配置");
    }
    // 若已连接，直接返回连接实例，避免重复连接
    if (mongoose.connection.readyState === 1) {
      return mongoose.connection;
    }
    await mongoose.connect(url);
    console.log("MongoDB连接成功");
  } catch (error) {
    console.error("MongoDB连接失败详情:", error);
    throw new Error("数据库连接失败，请检查环境变量和MongoDB配置");
  }
};

同时检查MongoDB Atlas的IP白名单：

• 进入MongoDB Atlas控制台，找到你的集群→Network Access→添加0.0.0.0/0（允许所有IP访问，测试环境可用，生产环境可限制Vercel IP）。

4. 优化API错误日志 #

修改API的错误处理逻辑，方便在Vercel日志中查看具体错误：

// app/api/user/route.ts
catch (error) {
  console.error("API请求异常:", error);
  return NextResponse.json(
    { 
      message: "服务器内部错误", 
      detail: error instanceof Error ? error.message : "未知错误" 
    },
    { status: 500 }
  );
}

5. 验证Vercel环境变量与部署 #

• 进入Vercel项目→Settings→Environment Variables，确认MONGODB_URI和NEXT_PUBLIC_API_URL的值正确，且勾选了"Automatically expose to System Environment Variables"。
• 环境变量修改后，必须重新部署项目（在Vercel控制台点击"Deploy"按钮，或推送新的代码触发部署）。

6. 查看Vercel函数日志排查问题 #

登录Vercel→进入项目→Functions→找到api/user函数，查看执行日志：

• 如果日志显示MONGODB_URI环境变量未配置，说明环境变量没有正确加载，检查变量名是否拼写正确，是否重新部署。
• 如果显示MongoDB连接超时/拒绝，检查IP白名单和连接字符串是否正确。

内容的提问来源于stack exchange，提问作者山口大貴