Next.js 18版本API部署到Vercel后无法运行求助

1. 检查API路由文件的路径与命名 #

Vercel的API路由严格遵循pages/api/[path]/[file].js（或.ts）的结构，确保你的接收端代码文件路径为pages/api/createAcc/check.js（或.ts）。注意路径大小写，Vercel服务器区分大小写，而本地系统（如Windows）可能不区分，比如createacc和createAcc会被识别为不同路径。

2. 处理请求方法与预检请求 #

前端发送的是POST请求，但接收端代码未对请求方法做校验，可能导致非POST请求（如浏览器OPTIONS预检）返回异常。修改接收端代码：

export default async function Check(req, res) {
  // 仅处理POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method Not Allowed' });
  }
  
  try {
    res.json({ message: "Success" });
  } catch (error) {
    console.log(error);
    res.status(500).json({ error: "Internal server error" });
  }
}

3. 确认项目部署类型是否支持API路由 #

如果你的项目是静态导出（比如Next.js执行next export），Vercel会将其部署为纯静态站点，无法运行服务器端API路由。解决方式：

• 取消静态导出配置，让Vercel以Node.js服务器模式部署
• 若必须静态导出，改用Vercel Edge Functions或其他无服务器函数方案

4. 完善前端错误捕获逻辑 #

当前端请求失败时，若服务器返回非JSON格式响应（比如Vercel默认的错误页面HTML），await res.json()会抛出未捕获异常。修改前端代码：

const GetResponse = async () => {
  try {
    const res = await fetch("/api/createAcc/check", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify("hello"),
    });
    
    if (!res.ok) {
      // 先判断响应格式
      const errorContent = await res.text();
      let errorMessage;
      try {
        errorMessage = JSON.parse(errorContent);
        console.error("Error:", errorMessage.error);
      } catch {
        console.error("Server returned non-JSON error:", errorContent);
      }
      return;
    }
    
    const data = await res.json();
    console.log("Success:", data);
  } catch (networkError) {
    console.error("Network error:", networkError);
  }
};

5. 查看Vercel函数日志定位具体错误 #

登录Vercel控制台，找到目标项目，进入Functions标签页，查看api/createAcc/check函数的执行日志，里面会显示具体错误信息（如依赖缺失、语法错误、超时等），这是排查问题最直接的方式。

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