Next.js使用[slug]动态路由模板生成首页时路径不匹配如何解决

核心原因是Next.js的基础动态路由[slug]仅能匹配非空的单一路径段，根路径/没有对应的路径参数值，因此无法匹配到该路由。

方案1：使用可选捕获所有路由（推荐） #

这是最适配全站共用一套页面模板需求的方案，无需额外配置框架规则，同时兼容单层级、多层级路径和根路径：

• 将你的pages/[slug].tsx文件重命名为pages/[[...slug]].tsx，该路由格式是Next.js 10及以上版本原生支持的可选捕获路由，可匹配从根路径开始的任意层级路径。
• 调整getStaticPaths的返回格式，捕获路由要求返回带params字段的对象结构：

export async function getStaticPaths() {
  const allPages = await getAllPostsWithSlug();

  const paths = allPages.edges.map(({ node }) => {
    // 根路径特殊处理，slug参数赋值为空数组
    const slugSegments = node.uri === '/' ? [] : node.uri.split('/').filter(Boolean);
    return {
      params: {
        slug: slugSegments
      }
    }
  }) || [];

  return {
    paths,
    fallback: true,
  };
}

• 同步修改getStaticProps中的uri拼接逻辑：

export async function getStaticProps({ params }) {
  // 根路径下params.slug为undefined，手动赋值为/即可
  const requestUri = params.slug?.length ? `/${params.slug.join('/')}` : '/';
  // 后续原有查询逻辑保持不变，使用requestUri拉取对应页面数据即可
  const pageData = await fetchPageData(requestUri);
  return {
    props: { pageData },
    revalidate: 60
  }
}

方案2：通过重写规则兼容原有路由 #

如果不想修改现有文件名和路由参数逻辑，可以通过Next.js的重写配置实现根路径转发：

• 在项目根目录的next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/index',
      },
    ]
  },
}

module.exports = nextConfig

• 在getStaticPaths中手动添加首页对应的路径参数：

export async function getStaticPaths() {
  const allPages = await getAllPostsWithSlug();
  const paths = [
    // 手动注入首页路径映射
    { params: { slug: 'index' } },
    ...allPages.edges.map(({ node }) => ({
      params: { slug: node.uri.replace(/^\/|\/$/g, '') }
    }))
  ] || [];

  return {
    paths,
    fallback: true,
  };
}

• 在getStaticProps中添加兼容逻辑：如果拿到的slug值为index，就按首页uri拉取数据即可。

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