NextJS 13执行npm run build报错无法部署，请求技术协助

开发者阿泽

2026-7-16

NextJS 13 build 预渲染fetch失败问题解决方案

问题分析

项目在npm run dev时运行正常，但执行npm run build时首页预渲染报错，核心原因是getStaticProps中调用fetchPageInfo时fetch请求失败。这是因为静态生成阶段（build）的运行环境与开发环境存在差异，导致fetch目标地址无法正常访问。

具体解决方法

1. 直接调用内部API逻辑（推荐）

由于/api/pageInfo是NextJS的内部API路由，在getStaticProps中无需通过HTTP请求调用，直接导入API的处理函数即可规避网络请求问题：

从pages/api/pageInfo.js中抽离出数据获取的核心逻辑（比如从数据库或本地文件读取数据的函数）；
在pages/index.js的getStaticProps中直接调用该函数，替代fetch请求：

// 从API文件导入数据获取函数
import { getPageInfo } from '../pages/api/pageInfo';

export async function getStaticProps() {
  let pageInfo = {};
  try {
    pageInfo = await getPageInfo();
    // 其他数据获取逻辑
  } catch (err) {
    console.error('获取pageInfo失败:', err);
  }
  
  return {
    props: { pageInfo },
    revalidate: 86400
  };
}

2. 修正环境变量与fetch地址

如果坚持使用fetch请求：

确保NEXT_PUBLIC_BASE_URL在build阶段设置正确：
- 本地build时，需先启动开发服务器（npm run dev），并将NEXT_PUBLIC_BASE_URL设为http://localhost:3000；
- 生产部署时，设置为项目的实际域名；
在fetchPageInfo中添加错误捕获，避免请求失败直接中断build：

export const fetchPageInfo = async () => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/pageInfo`);
    if (!res.ok) throw new Error(`请求状态异常: ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('fetchPageInfo错误详情:', err);
    return {}; // 返回默认数据，保证build流程继续
  }
};