Next.js 13集成Sanity部署时预渲染错误求助

核心错误分析 #

你遇到的TypeError: fetch failed和SyntaxError: Unexpected token < in JSON at position 0，本质是构建时Sanity API请求返回了HTML（比如404/403错误页）而非预期的JSON数据，导致getStaticProps解析失败。结合本地构建正常、部署失败的现象，重点排查以下几个方向：

1. 同步部署平台的环境变量 #

本地.env.local里的Sanity配置变量（如SANITY_PROJECT_ID、SANITY_DATASET、SANITY_API_BASE_URL）不会自动同步到Vercel/Netlify，必须手动添加：

• 进入部署平台的项目设置 → 环境变量页面
• 复制本地.env.local里的所有Sanity相关变量，注意变量名完全一致（如果是NEXT_PUBLIC_开头的公开变量，也要保留前缀）
• 保存后重新触发构建

2. 校验Sanity API请求的正确性 #

在fetchPrices方法中，确认请求URL和权限配置：

• 检查API地址格式：正确的Sanity查询API地址应为https://<你的项目ID>.api.sanity.io/v2023-03-07/data/query/<数据集名称>，注意替换v2023-03-07为你实际使用的API版本号
• 如果你的Sanity数据集是私有状态，必须在请求头里添加授权Token：

  async function fetchPrices() {
    const url = `${process.env.SANITY_API_BASE_URL}/data/query/${process.env.SANITY_DATASET}?query=*[_type == "price"]`;
    const res = await fetch(url, {
      headers: {
        'Authorization': `Bearer ${process.env.SANITY_API_READ_TOKEN}`
      }
    });
    // 新增HTTP错误处理
    if (!res.ok) {
      throw new Error(`Sanity请求失败: ${res.status} ${res.statusText}`);
    }
    const data = await res.json();
    return data.result;
  }
  

• 在部署平台的构建日志中打印请求URL，确认地址无误（可临时添加console.log('Sanity API URL:', url)到fetchPrices）

3. 调整静态导出（next export）的配置 #

你使用了next build && next export生成纯静态文件，但该模式下：

• getStaticProps完全在构建阶段运行，若部署平台的构建服务器无法访问Sanity API（比如Sanity设置了IP白名单），就会请求失败
• 建议先移除next export，直接用next build部署（Vercel/Netlify原生支持Next.js的静态生成/ISR，无需手动导出）
• 如果必须使用静态导出，需确保Sanity允许部署平台的构建IP访问，或切换为公开数据集

4. 修复本地构建的API端点0B异常 #

本地构建时API端点显示0B，说明本地构建阶段可能未正确获取数据，可执行以下操作验证：

• 本地执行next build && next export，查看生成的out目录下的index.html，确认是否包含Sanity数据
• 检查本地.env.local文件是否在构建阶段被正确加载（Next.js默认会在build时加载.env.local，但需确保变量名没有拼写错误）

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