Vercel部署Next.js项目遭遇TypeError: fetch failed问题求助

问题根源 #

你代码中硬编码的http://localhost:3000/api/event是本地开发环境的地址，在Vercel服务器上不存在这个本地服务，导致部署时预渲染页面无法连接到API，抛出ECONNREFUSED错误。

解决方案 #

方案1：使用相对路径（推荐） #

在Next.js中，调用内部API路由时无需完整URL，直接使用相对路径/api/event即可。Next.js会自动处理开发和生产环境的路由映射，不管是本地调试还是Vercel部署都能正常工作。

修改后的代码：

async function getData(): Promise<Events[]> {
  const data = await fetch(`/api/event`, {
    cache: "no-cache",
  }).then((res) => res.json());
  return data;
}

方案2：通过环境变量配置基础URL（适用于外部API或多环境场景） #

如果你的API部署在外部服务，或者需要区分开发/生产环境的不同地址，可以通过环境变量来管理：

1. 本地开发：在项目根目录创建.env.local文件，添加：

NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

2. Vercel部署：登录Vercel控制台，找到你的项目，进入「Settings > Environment Variables」，添加环境变量：

NEXT_PUBLIC_API_BASE_URL=https://your-vercel-project-domain.vercel.app

3. 修改代码引用环境变量：

async function getData(): Promise<Events[]> {
  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const data = await fetch(`${baseUrl}/api/event`, {
    cache: "no-cache",
  }).then((res) => res.json());
  return data;
}

关键说明 #

• 优先使用方案1，因为Next.js对内部API的相对路径调用有内置优化，无需额外配置，更简洁可靠。
• 环境变量名以NEXT_PUBLIC_开头时，才能在客户端组件中访问；如果仅在服务器端使用（如服务器组件、API路由），可以去掉NEXT_PUBLIC_前缀。

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