使用App Router的Next.js 14项目构建时出现TypeError: fetch failed错误求助

看起来你在构建Next.js 14 App Router项目时，卡在了静态页面生成阶段，核心问题是ECONNREFUSED（连接被拒绝）——这说明预渲染页面时，你的代码发起的fetch请求连不上目标服务器。结合错误栈指向app/dashboard/page.js，大概率是你在这个页面组件里请求了本地开发API（比如http://localhost:3000/api/xxx），但构建阶段本地开发服务器并没有运行，导致连接失败。

我给你几个针对性的解决方案，按推荐程度排序：

1. 直接调用后端逻辑（最推荐） #

既然用的是Next.js的Server Components（App Router默认都是），完全没必要通过HTTP fetch调用本地API，直接在页面组件里调用数据库查询、业务逻辑函数就行。这样既能避免构建时的连接问题，还能减少不必要的网络请求，提升性能。

比如原来的代码可能是这样：

// app/dashboard/page.js
async function fetchDashboardData() {
  const res = await fetch('http://localhost:3000/api/dashboard');
  return res.json();
}

export default async function Dashboard() {
  const data = await fetchDashboardData();
  return <div>{/* 渲染数据 */}</div>;
}

改成直接调用逻辑：

// app/dashboard/page.js
// 导入你的后端逻辑函数（比如从lib/db或者services文件夹）
import { getDashboardData } from '@/lib/dashboardService';

export default async function Dashboard() {
  const data = await getDashboardData();
  return <div>{/* 渲染数据 */}</div>;
}

2. 区分构建环境与运行环境 #

如果必须保留fetch请求，可以通过Next.js的环境变量判断当前是否处于构建阶段，在构建时返回模拟数据或者直接调用逻辑，运行时再发起真实请求。

Next.js提供了NEXT_PHASE环境变量，构建阶段它的值是phase-production-build，你可以用这个做判断：

// app/dashboard/page.js
async function getDashboardData() {
  if (process.env.NEXT_PHASE === 'phase-production-build') {
    // 构建阶段返回模拟数据，或者直接调用数据库逻辑
    return {
      stats: { totalUsers: 100, totalOrders: 50 },
      recentActivity: []
    };
  }
  // 运行环境下发起真实请求
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/dashboard`, {
    cache: 'force-cache'
  });
  return res.json();
}

export default async function Dashboard() {
  const data = await getDashboardData();
  return <div>{/* 渲染数据 */}</div>;
}

3. 确保构建时API服务可访问（不推荐） #

如果你的fetch请求指向外部API，要确保构建机器能正常访问该API；如果是本地API，你可以尝试在构建前启动API服务，但这种方式不稳定，容易因为服务启动慢、端口冲突等问题导致构建失败，只适合临时测试。

另外还要检查：有没有把开发环境的localhost硬编码到代码里？生产环境应该用正式的API域名，最好通过环境变量配置。

备注：内容来源于stack exchange，提问作者gooneraki