Next.js中getStaticPaths与rewrites配置兜底路由出现404问题求助

你的问题核心出在两处关键配置错误：

1. Next.js 配置未正确导出 #

你的next.config.js没有通过module.exports导出配置对象，导致rewrites规则完全不生效。访问/actual-route这类路径时，Next.js找不到对应页面，直接返回404，根本不会触发重写逻辑。

2. getStaticPaths函数导出语法错误 #

collection/[...slug].tsx里的getStaticPaths缺少function关键字，Next.js无法识别这个静态路径生成函数，导致fallback: "blocking"机制失效——既匹配不到预生成的静态路径，也无法动态生成新页面，最终出现404。

修正后的代码 #

修正 next.config.js #

确保用module.exports导出完整配置：

module.exports = {
  rewrites: async () => {
    return [
      {
        source: "/actual-route/:slug*",
        destination: "/collection/:slug*",
      },
      {
        source: "/another-route/:slug*",
        destination: "/collection/:slug*",
      },
    ];
  },
};

修正 collection/[...slug].tsx #

补充getStaticPaths的function关键字，同时规范getStaticProps的导出：

export async function getStaticPaths() {
  return {
    paths: [
      {
        params: {
          slug: ["actual-route"],
        },
      },
      {
        params: {
          slug: ["actual-route", "child"],
        },
      },
      {
        params: {
          slug: ["another-route"],
        },
      },
      {
        params: {
          slug: ["another-route", "another-child"],
        },
      },
    ],
    fallback: "blocking",
  };
}

export async function getStaticProps({ params }) {
  return { props: { slug: params.slug } };
}

验证步骤 #

1. 重启Next.js开发服务器，确保新配置生效。
2. 访问预生成路径（如/actual-route/child），页面应正常加载且getStaticProps会执行。
3. 访问未预生成路径（如/actual-route/new-item），fallback: "blocking"会触发动态生成，getStaticProps也会被调用。

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