Next.js 13使用getStaticProps预渲染静态页遇fetch failed错误求助

核心问题分析 #

1. TypeError: fetch failed：Next.js静态构建时，getStaticProps在Node环境执行，此时内部API路由的本地服务器并未启动，调用fetch(${process.env.NEXT_PUBLIC_BASE_URL}/api/getPageInfo)必然失败。
2. Sanity客户端版本警告：未在Sanity客户端配置中指定apiVersion，该行为已被弃用。

1. 修复Sanity客户端API版本警告 #

找到你的sanityClient初始化文件（通常是sanity.ts），添加apiVersion配置：

// sanity.ts
import { createClient } from 'next-sanity';

export const sanityClient = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: '2023-08-01', // 推荐使用当前日期（格式YYYY-MM-DD），或Sanity支持的最新版本
  useCdn: process.env.NODE_ENV === 'production', // 生产环境启用CDN加速
});

2. 重构代码：直接在getStaticProps中调用Sanity查询 #

步骤1：修改/lib下的获取函数，直接对接Sanity #

将原来调用内部API路由的逻辑，替换为直接使用sanityClient执行Groq查询。以fetchPageInfo为例：

// /lib/fetchPageInfo.ts
import { sanityClient } from '../sanity';
import { groq } from 'next-sanity';
import { PageInfo } from '../typings';

// 复用原API路由中的Groq查询
const query = groq`*[_type == "pageInfo"][0]`;

export const fetchPageInfo = async () => {
  const pageInfo: PageInfo = await sanityClient.fetch(query);
  return pageInfo;
};

按照同样的方式，修改fetchSocial、fetchExperiences等其他获取函数，把对应API路由中的Groq查询移到这些函数里，直接调用sanityClient.fetch。

步骤2：保留getStaticProps原有调用逻辑 #

你的index.tsx中的getStaticProps无需修改，因为现在这些fetchXXX函数直接和Sanity后端通信，不再依赖内部API路由：

// index.tsx
export const getStaticProps: GetStaticProps<Props> = async () => {
  const pageInfo: PageInfo = await fetchPageInfo();
  const socials: Social[] = await fetchSocial();
  const experiences: Experience[] = await fetchExperiences();
  const skills: Skill[] = await fetchSkills();
  const projects: Project[] = await fetchProjects();

  return {
    props: {
      pageInfo,
      experiences,
      skills,
      projects,
      socials,
    },
    revalidate: 10,
  };
};

步骤3：可选清理（非必需） #

如果内部API路由不再被前端其他地方调用，可以删除pages/api下对应的路由文件（比如getPageInfo.ts），减少冗余代码。

验证执行 #

运行npm run build，此时应该不会再出现TypeError: fetch failed错误，同时Sanity版本警告也会消失。

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