Next.js如何实现页面名前加动态路由段并获取对应slug值

根据你使用的Next.js路由模式不同，对应实现方式如下：

1. Pages Router 实现方式 #

第一步：调整文件结构 #

在pages目录下新建名为[bandSlug]的动态文件夹，将原本的about.tsx、music.tsx移入该文件夹中，最终结构：

pages/
└── [bandSlug]/
    ├── about.tsx
    └── music.tsx

第二步：获取动态乐队slug #

在页面组件中通过useRouter钩子即可拿到路径中的动态值，示例代码（以about.tsx为例）：

import { useRouter } from 'next/router'

export default function AboutPage() {
  const router = useRouter()
  const { bandSlug } = router.query

  return <div>当前乐队：{bandSlug} 的关于页面</div>
}

配置完成后即可直接通过/nirvana/about、/metalica/music这类路径访问，完全匹配需求。

2. App Router（Next.js 13+ 推荐）实现方式 #

第一步：调整文件结构 #

在app目录下新建名为[bandSlug]的动态文件夹，在文件夹内分别创建about、music路由目录并添加对应的page.tsx，最终结构：

app/
└── [bandSlug]/
    ├── about/
    │   └── page.tsx
    └── music/
        └── page.tsx

第二步：获取动态乐队slug #

App Router会自动将动态参数注入到页面组件的props中，直接读取即可，示例代码（以about/page.tsx为例）：

export default function AboutPage({ params }: { params: { bandSlug: string } }) {
  const bandSlug = params.bandSlug
  return <div>当前乐队：{bandSlug} 的关于页面</div>
}

补充：静态生成（SSG）场景配置 #

如果你使用静态生成模式，需要提前声明所有可用的乐队slug值：

• Pages Router 中在页面文件内添加getStaticPaths方法：

export async function getStaticPaths() {
  // 可从数据源读取全量乐队slug
  const paths = [
    { params: { bandSlug: 'nirvana' } },
    { params: { bandSlug: 'metalica' } },
  ]
  return { paths, fallback: false }
}

• App Router 中在页面文件内添加generateStaticParams方法：

export async function generateStaticParams() {
  // 可从数据源读取全量乐队slug
  return [
    { bandSlug: 'nirvana' },
    { bandSlug: 'metalica' },
  ]
}

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