Next.js部署Netlify报错：构建导出路径/users/[userid]出现错误

问题核心原因 #

你遇到的构建报错是因为Next.js执行getStaticPaths和getStaticProps的构建阶段，无法正常请求到你部署的Express服务接口，请求失败直接中断了静态页面导出流程。本地环境接口可正常访问，不代表Netlify构建节点能正常访问该接口。

具体解决步骤 #

1. 排查接口访问可行性 #

• 如果你将Next.js和Express服务放在同一个仓库部署到Netlify：构建阶段Express服务还未完成上线，此时请求未部署的接口必然失败。请将Express服务单独部署，拿到稳定可公网访问的接口地址后，再替换到Next.js的fetch请求中。
• 确认你填写的接口地址无IP白名单、内网限制、访问鉴权等拦截规则，保证Netlify构建节点可以正常请求到接口。

2. 补充代码容错逻辑 #

当前代码没有处理请求异常场景，只要接口请求失败就会直接终止构建，你需要添加请求错误兜底逻辑：

修改getStaticPaths代码

export async function getStaticPaths() {
  try {
    const res = await fetch("你的Express接口地址/api/users");
    // 手动判断HTTP响应状态，fetch默认不会对404/500等错误抛出异常
    if (!res.ok) throw new Error("用户列表接口请求失败");
    const users = await res.json();
    const paths = users.map((user) => ({
      params: { userid: user._id },
    }));
    return { paths, fallback: true };
  } catch (err) {
    // 构建阶段请求失败时返回空路径，依托fallback:true的配置，在运行时生成用户页面
    return { paths: [], fallback: true };
  }
}

修改getStaticProps代码

export async function getStaticProps({ params }) {
  try {
    const res = await fetch(`你的Express接口地址/api/users/${params.userid}`);
    if (!res.ok) throw new Error("用户详情接口请求失败");
    const user = await res.json();
    return { props: { user: user || {} }, revalidate: 3600 };
  } catch (err) {
    // 请求失败时返回404页面，或返回空用户对象避免页面渲染报错
    return { notFound: true };
    // 可选方案：返回空用户，设置短时间自动重试更新
    // return { props: { user: {} }, revalidate: 60 }
  }
}

3. 检查Netlify配置 #

确认你的项目已安装@netlify/plugin-nextjs插件，新版Netlify部署Next.js项目会默认安装该插件，旧项目手动安装即可保证SSG、ISR等特性正常兼容。

4. 可选方案替换 #

如果不想处理构建阶段的接口请求问题，可直接将用户详情页的getStaticProps+getStaticPaths替换为getServerSideProps，该函数会在用户每次访问页面时才发起接口请求，不需要构建阶段调用接口，可直接规避该构建报错。

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