Next.js 13.4部署Vercel时JSON解析语法错误求助

为啥会报错？ #

SyntaxError: Unexpected token < in JSON at position 0 说白了就是预渲染阶段fetch到的不是预期的JSON接口数据，而是HTML页面（大概率是404错误页）。因为Vercel预渲染是在服务器端执行的，当前代码非要通过外部HTTP请求调用自身API，要么此时API服务还未就绪，要么完全没必要走外部域名，最终返回错误页面，解析JSON自然就失败了。

具体怎么改？ #

1. 服务端直接调用API逻辑，别绕外部请求 #

在Next.js预渲染阶段（不管是App Router的服务器组件，还是Pages Router的getStaticProps/getServerSideProps），直接调用API路由里的处理函数即可，不用通过fetch请求外部URL。示例：

// src/helpers/Handlers/ProductHandlers.jsx
// 直接导入api/product/route.js里的GET处理函数
import { GET as productGetHandler } from "@/app/api/product/route";

export async function getProductDatas() {
  // 构造Request对象供API handler使用
  const req = new Request('/api/product');
  const res = await productGetHandler(req);
  
  if (!res.ok) {
    throw new Error(`API请求失败: ${res.status}`);
  }
  
  return res.json();
}

2. 修正getBaseUrl()的环境判断逻辑 #

当前函数没区分服务器端运行和客户端运行，预渲染在服务端执行时根本不需要外部域名。修改后：

export function getBaseUrl() {
  // 服务器端环境：直接用空字符串，Next.js会自动处理内部API路由
  if (typeof window === 'undefined') {
    return '';
  }
  // 客户端环境
  if (process.env.NODE_ENV === 'development') {
    return process.env.NEXT_PUBLIC_SITE_URL;
  }
  return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
}

这样服务端预渲染时，fetch的地址会变成/api/product，直接内部调用API路由，不走外部HTTP请求。

3. 检查Vercel环境变量配置 #

登录Vercel控制台进入你的项目，打开Settings -> Environment Variables：

• 确认NEXT_PUBLIC_VERCEL_URL已添加，值为你的Vercel域名（比如your-project.vercel.app），不要加https://
• 配置完成后重新部署项目，确保环境变量生效

4. 给fetch添加错误处理 #

不要上来就直接解析JSON，先检查响应状态是否正常：

export async function getProductDatas() {
  const baseUrl = getBaseUrl()
  const res = await fetch(`${baseUrl}/api/product`, {
    method: "GET",
    next: { tags: ["product"] },
  });

  if (!res.ok) {
    console.error(`API请求失败，状态码: ${res.status}`);
    throw new Error('获取产品数据失败');
  }
  
  return res.json();
}

最后验证点 #

• 查看Vercel构建日志中的baseUrl输出，预渲染阶段服务端的baseUrl应为空字符串，符合预期
• 部署完成后直接访问https://your-project.vercel.app/api/product，确认能返回正常的JSON数据

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