NextJS 13 Page Router构建后动态路由失效，本地部署报404

1. 校验getStaticPaths配置逻辑 #

getStaticPaths必须返回包含paths和fallback的对象，且paths内的参数要和动态路由文件名严格匹配。比如动态路由文件是[slug].js，paths里的每个对象需写成params: { slug: "xxx" }。

正确示例：

export async function getStaticPaths() {
  // 替换为你获取路径参数的实际逻辑，比如从API/本地文件读取
  const data = await fetch('https://your-api.com/items').then(res => res.json());
  const paths = data.map(item => ({
    params: { slug: item.slug }
  }));

  // fallback设为false时，未定义的路径直接返回404；需支持任意参数可设为true或'blocking'
  return { paths, fallback: false };
}

如果fallback设为false但paths未覆盖所有可能的参数值，访问未定义的参数就会触发404。

2. 检查路由文件与文件夹结构 #

确保动态路由文件命名正确：比如要实现/products/[id]，结构必须是pages/products/[id].js（或.tsx），不能遗漏方括号或拼写错误（比如写成id.js）。

3. 验证构建产物是否生成对应静态页面 #

执行npm run build后，查看.next/server/pages目录，确认是否存在对应动态参数的静态文件。比如参数为shirt，应能找到pages/products/shirt.html类的文件。如果没有，说明getStaticPaths的路径生成逻辑有问题——比如接口返回空数据、参数映射错误，需排查数据获取代码。

4. 本地部署的服务器配置 #

• 若用next start启动生产服务器，Next.js会自动处理路由，无需额外配置。
• 若用静态导出（next export）后用第三方服务器（如nginx、serve）部署，需配置 fallback 路由，让所有请求指向index.html，由客户端路由接管：
  • 使用serve时：

    serve -s out
    

  • 使用nginx时，在配置中添加：

    location / {
      try_files $uri $uri/ /index.html;
    }
    

5. 确认未混淆App Router与Page Router #

Next.js 13同时支持两种路由系统，确保动态路由文件放在pages目录下，而非app目录——App Router的动态路由规则为[slug]/page.js，Page Router的getStaticPaths对其无效。

6. 排查getStaticProps的正确性 #

如果getStaticPaths配置正确但页面仍无法生成，需检查getStaticProps是否能正常接收params参数，且未抛出错误：

export async function getStaticProps({ params }) {
  const item = await fetch(`https://your-api.com/items/${params.slug}`).then(res => res.json());
  if (!item) {
    return { notFound: true }; // 返回该对象会生成404页面
  }
  return {
    props: { item },
    revalidate: 60 // 可选，开启增量静态再生
  };
}

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