Next.js+Sanity执行npm run build时首页预渲染fetch失败求助

本地运行正常，但执行npm run build或部署到Vercel后，首页/预渲染失败，报错TypeError: fetch failed，错误指向fetchPageInfo函数及getStaticProps环节。组件导出导入均无误，常规排查无效，需定位解决。

相关信息 #

1. 错误日志 #

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async fetchPageInfo (/vercel/path0/.next/server/pages/index.js:1280:17)
    at async getStaticProps (/vercel/path0/.next/server/pages/index.js:1196:22)
> Export encountered errors on following paths:
    /

2. 环境变量配置 #

NEXT_PUBLIC_SANITY_DATASET=
NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SANITY_API_VERSION=
NEXT_PUBLIC_SANITY_API_TOKEN=

3. Sanity Client 代码 #

import {createClient} from 'next-sanity'
import imageUrlBuilder from '@sanity/image-url'
import { SanityImageSource } from "@sanity/image-url/lib/types/types";

export const config = {
   projectId : process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, 
     dataset : process.env.NEXT_PUBLIC_SANITY_DATASET, 
     apiVersion : process.env.NEXT_PUBLIC_SANITY_API_VERSION,
     useCdn: true
   };
   
   
   export const client = createClient(config);

   const builder = imageUrlBuilder(client);
   export function urlFor(source: SanityImageSource) {
      return builder.image(source)
   }

4. 首页 index.ts 的 getStaticProps 部分 #

export const getStaticProps: GetStaticProps<Props> = async ()=>{
  const pageInfo: PageInfo = await fetchPageInfo();
  const experience: Experience[] = await fetchExperience();
  const projects: Projects[] = await fetchProjects();
  const skills: Skills[] = await fetchSkills();
  const socials: Social[] = await fetchSocials();

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

排查与解决步骤 #

• 检查环境变量完整性：给出的配置中多个Sanity关键变量为空，这会导致Client初始化失败。需补全NEXT_PUBLIC_SANITY_PROJECT_ID、NEXT_PUBLIC_SANITY_DATASET、NEXT_PUBLIC_SANITY_API_VERSION（建议用YYYY-MM-DD格式），私有数据集还需配置有效的NEXT_PUBLIC_SANITY_API_TOKEN。Vercel等生产平台需同步配置这些变量，不能仅依赖本地文件。
• 核查数据请求函数实现：确认fetchPageInfo等函数正确使用了Sanity Client，而非错误调用本地地址或无效API。若用自定义fetch，需确保请求地址指向Sanity官方API，且携带正确的Token。
• 调整CDN配置：若使用私有数据集，useCdn: true会导致无法获取数据，需改为false，同时确保Token具备读取权限。
• 修正生产环境Base URL：NEXT_PUBLIC_BASE_URL在生产环境设为localhost:3000无效，若请求依赖该变量，需改为实际部署域名，或直接请求Sanity API而非本地地址。
• 本地模拟生产测试：执行npm run build后运行npm run start，复现问题以区分是构建时还是运行时错误。

内容的提问来源于stack exchange，提问作者Prathamesh R. Pawar