generateStaticParams导致Next.js应用Vercel部署失败求助

核心问题 #

报错SyntaxError: Unexpected token < in JSON at position 0说明构建阶段generateStaticParams中的fetch请求返回的不是JSON数据，而是HTML内容（通常是API的404/500错误页面），导致JSON解析失败，进而触发页面降级为客户端渲染，最终部署失败。返回空数组时，Next.js不会执行预渲染逻辑，而是依赖dynamicParams: true在客户端动态生成页面，此时客户端环境能正常访问API，所以可以运行。

解决步骤 #

1. 验证环境变量与API地址

• 确认process.env.NEXT_PUBLIC_API_URL在Vercel构建环境中已正确配置：
  • 登录Vercel控制台，进入项目的「Settings」→「Environment Variables」，检查该变量是否存在且值为正确的API根地址（比如https://your-api-domain.com，注意不要带末尾斜杠）。
  • 本地执行next build模拟构建环境，添加日志打印确认变量值：

    export async function generateStaticParams() {
      console.log('API URL:', process.env.NEXT_PUBLIC_API_URL); // 查看构建日志中的输出
      // ... 原有代码
    }
    

2. 为fetch添加错误处理

避免直接解析响应，先校验请求是否成功：

export async function generateStaticParams() {
  try {
    const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/listings?populate=images,amenities.*,amenities.icon,videos.*,property_status.*,currency.*,payment_duration.*,page_views.*,property_owner.*`;
    const listingsResp = await fetch(apiUrl);

    // 校验响应状态
    if (!listingsResp.ok) {
      throw new Error(`API请求失败，状态码: ${listingsResp.status}`);
    }

    const listings = await listingsResp.json();
    const paths = listings.data.map(listing => ({
      category: listing.attributes.property_status.data.attributes.slug,
      listing: [listing.attributes.slug, listing.id.toString()]
    }));
   
    return paths;
  } catch (err) {
    console.error('生成静态参数失败:', err);
    return []; // 出错时返回空数组，避免构建崩溃
  }
}

3. 检查API的可访问性

• 确认API端点在Vercel的构建服务器环境中可以访问：
  • 有些API可能设置了IP白名单、认证机制，或仅允许客户端请求，导致构建服务器无法访问。
  • 可以直接在Vercel构建日志中查看API请求的实际响应内容，定位是404、权限错误还是其他问题。

4. 同步页面路径与API返回的category值

注意报错中提到的页面路径是/listingsv2/[category]/[listing]，但你的页面文件路径是/listings/[category]/[...listing]/page.js，确认代码中category的取值（listing.attributes.property_status.data.attributes.slug）是否与实际路由的category规则匹配，避免因路径不匹配导致的隐性错误。

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