Next.js动态路由生产环境404错误排查及解决方案咨询

根源分析 #

是的，这就是问题的核心。你的生产环境是纯静态站点，但当前的getStaticPaths配置存在关键问题：

• fallback: "blocking" 依赖Next.js运行时服务器，在首次访问未预渲染的路径时动态生成页面，但纯静态站点没有后端服务器支撑这个逻辑。
• 静态站点仅能提供构建阶段预渲染好的页面，而你当前返回空的paths数组，没有预生成任何动态路由页面，所以访问时必然返回404。

可行解决方案 #

1. 预生成所有动态路由页面（推荐）

修改getStaticPaths，遍历本地JSON里的所有项目，生成对应的路径数组，这样构建阶段就会预渲染所有项目页面，静态部署后可直接访问：

export async function getStaticPaths() {
  // 从projects对象中提取所有项目标识，生成符合路由要求的路径格式
  const paths = Object.keys(projects).map((slug) => ({
    params: { project: slug.toLowerCase() }
  }));

  return {
    paths,
    fallback: false // 关闭fallback，因为所有路径都已提前预生成
  };
}

2. 执行正确的静态导出命令

构建静态文件时，必须运行以下命令，确保所有预渲染页面被导出到out目录：

next build && next export

部署时直接托管out目录即可。

3. 校验slug匹配逻辑

确认params.project.toLowerCase()与projects对象中的键完全匹配，避免因大小写、拼写差异导致无法找到对应项目数据。

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