在Vercel部署项目时遭遇fetch失败及预渲染错误求助

错误日志 #

TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async globalThis.fetch (/Versel/path0/.next/server/chunks/638.js:1:36426)
at async _ (/Versel/path0/.next/server/app/page.js:1:157951)
at async I (/Versel/path0/.next/server/app/page.js:1:158482) {
cause: Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
err no: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}
}
Error occurred prerendering page "/". Read more: <a href="https://nextjs.org/docs/messages/prerender-error" rel="nofollow noreferrer">https://nextjs.org/docs/messages/prerender-error</a>
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11372:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async globalThis.fetch (/vercel/path0/.next/server/chunks/638.js:1:36426)
at async _ (/vercel/path0/.next/server/app/page.js:1:157951)
at async I (/vercel/path0/.next/server/app/page.js:1:158482)

问题根源 #

预渲染页面时，代码尝试请求本地127.0.0.1:3000端口，但Vercel部署环境中没有运行本地开发服务器，导致连接被拒绝。

解决方案 #

• 替换本地API地址为Sanity远程端点
  检查fetch调用，直接使用Sanity官方API地址（格式：https://<你的项目ID>.api.sanity.io/v<API版本>/data/query/<数据集名>），不要依赖本地3000端口的代理地址。同时确保.env文件中的Sanity相关变量（如NEXT_PUBLIC_SANITY_PROJECT_ID、NEXT_PUBLIC_SANITY_DATASET）已同步配置到Vercel项目的环境变量面板。

• 改用Sanity客户端库直接获取数据
  在Next.js服务器组件中，直接使用next-sanity或@sanity/client库请求数据，跳过本地API代理步骤。示例代码：

  import { createClient } from 'next-sanity';
  
  const client = createClient({
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
    apiVersion: '2023-05-01',
    useCdn: false,
  });
  
  async function getSanityData() {
    return client.fetch('*[_type == "post"]');
  }
  

• 验证环境变量一致性
  本地.env文件的变量名和值要与Vercel上完全一致，注意客户端需访问的变量必须添加NEXT_PUBLIC_前缀。可在代码中临时打印变量值，确认部署时能正常读取。

• 检查Sanity权限设置
  若使用私有数据集，确保Vercel环境变量中配置了SANITY_API_TOKEN且该令牌拥有数据读取权限；若为公开数据集，确认Sanity项目的“公开访问”已开启。

相关截图 #

• .env文件配置：
• API调用代码：
• Sanity Studio设置：

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