Next.js 14本地开发正常，部署Vercel后API路由404问题求助

1. 核对API路由文件结构 #

Next.js对API路由的文件路径有严格要求：

• 若使用App Router，/api/v1/bookings/get端点对应的文件必须是：

  app/api/v1/bookings/get/route.ts
  

  如果你的文件放在app/api/v1/bookings/route.ts，实际对应的API端点是/api/v1/bookings，而非/api/v1/bookings/get，这会直接导致Vercel无法识别目标路由。
• 若使用Pages Router，文件路径应为：

  pages/api/v1/bookings/get.ts
  

务必确保文件路径与API端点完全匹配，Vercel部署时会严格按照文件结构生成路由映射。

2. 移除Server Component中的BASE_URL依赖 #

在Server Component中发起内部API请求时，无需添加BASE_URL——服务器端运行的代码可以直接用相对路径访问内部接口，避免环境变量配置错误：

// 原代码
const res = await fetch(process.env.BASE_URL + "/api/v1/bookings/get", {
  next: {
    revalidate: 60,
  },
});

// 修改后
const res = await fetch("/api/v1/bookings/get", {
  next: {
    revalidate: 60,
  },
});

如果必须保留BASE_URL，需在Vercel控制台确认其值正确（比如不带末尾斜杠：https://your-vercel-domain.vercel.app）。

3. 验证Vercel环境变量配置 #

登录Vercel项目控制台，进入Settings > Environment Variables：

• 检查BASE_URL（若保留）、Clerk的NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY/CLERK_SECRET_KEY、Prisma的DATABASE_URL是否正确配置，且标记为在生产环境中暴露。
• 环境变量的拼写错误或缺失，可能间接导致路由请求异常。

4. 检查API路由的导出格式 #

确保API路由文件无语法错误，且正确导出GET函数：

• 确认文件后缀为.ts/.js，函数名为大写的GET()（小写get()不会被Next.js识别）。
• 本地执行next build命令，提前排查构建阶段的路由相关报错。

5. 强制重新部署并查看详细日志 #

• 在VercelDeployments页面选择最近的部署，点击Redeploy并取消勾选Use existing Build Cache，强制重新构建。
• 部署完成后，查看Functions标签页，确认/api/v1/bookings/get函数是否存在；若不存在，说明文件结构或命名有误。
• 查看Logs > Serverless Functions日志，获取更详细的函数初始化或执行错误信息。

额外排查：Clerk认证的异常处理 #

虽然日志提示路由未找到，但auth().protect()部署后失败可能导致响应异常，被前端误判为路由问题。将认证逻辑移入try块并返回标准JSON错误：

export async function GET() {
  try {
    auth().protect(); // 移入try块捕获认证错误
    const user = await currentUser();
    
    const bookings = await prisma.ride.findMany({
      where: {
        rider: {
          email: user?.primaryEmailAddress?.emailAddress,
        }
      }
    });

    return new Response(JSON.stringify({bookings}), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    console.error("API Error:", error);
    return new Response(JSON.stringify({ error: error.message }), {
      status: error.name === "UnauthorizedError" ? 401 : 500,
      headers: { "Content-Type": "application/json" },
    });
  }
}

确保错误响应始终返回JSON格式，避免前端解析HTML失败。

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