Next.js构建时静态页面生成失败，API调用404问题求助

问题根源 #

你的页面使用了异步组件，Next.js默认会在构建阶段执行静态生成（SSG），此时发起的真实API请求因后端未部署、网络限制等原因返回404，导致构建失败。由于数据频繁变动，需禁用静态生成，改用动态渲染或服务器端渲染。

解决方案 #

针对App Router（Next.js 13+） #

在页面文件顶部导出dynamic常量，强制启用动态渲染，这样页面会在每次请求时才在服务器端执行API调用，构建阶段不会预渲染：

export const dynamic = 'force-dynamic';

export default async function Brands() {
  let data = await fetch("https://rentall.ai/api/admin/brands");
  let brands = await data.json();
  return <BrandsPageView brands={brands} />;
}

针对Pages Router（Next.js 12及以下） #

使用getServerSideProps实现服务器端渲染，构建阶段不会触发API请求，仅在用户访问页面时执行：

export default function Brands({ brands }) {
  return <BrandsPageView brands={brands} />;
}

export async function getServerSideProps() {
  const res = await fetch("https://rentall.ai/api/admin/brands");
  const brands = await res.json();

  return {
    props: { brands },
  };
}

缓存函数调整（可选） #

如果你保留了cache函数，为了适配频繁变动的数据，可添加revalidate: 0禁用缓存：

const brands = cache(async (): Promise<Brand[]> => {
  const response = await axios.get("https://rentall.ai/api/admin/brands");
  return response.data;
}, { revalidate: 0 });

验证 #

修改后重新执行构建命令，此时构建阶段不会再发起API请求，页面访问时才会调用真实后端，避免404错误。

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