如何在Next.js中创建包含两层动态参数的路由

DevOps 小满

2026-10-4

多动态参数路由高效实现方案

你提到的场景可以直接使用文件系统路由自带的嵌套动态路由能力实现，不需要逐个创建分类对应的实体目录/文件，仅需1套通用文件结构即可匹配所有符合规则的URL：

针对Next.js Pages Router 实现步骤

在pages目录下创建双层动态参数的文件结构，路径为 pages/[category]/[book].js（使用TypeScript的话后缀改为.tsx）
- 其中[category]对应的就是动态分类参数，会匹配designer/engineering/art这类任意分类值
- 其中[book]对应的就是动态图书参数，会匹配book1这类任意图书标识
在页面组件中通过路由API读取动态参数，示例代码如下：

import { useRouter } from 'next/router'

export default function BookDetailPage() {
  const router = useRouter()
  // 直接从query中取出两个动态参数
  const { category, book } = router.query

  // 后续根据这两个参数请求对应图书数据、渲染页面即可
  return <div>分类：{category}，图书名称：{book}</div>
}

如果需要预渲染已知路径的页面，可以搭配getStaticPaths实现，示例如下：

// 预定义所有需要提前渲染的路径
export async function getStaticPaths() {
  // 可替换为从数据库/后台接口拉取全量分类+图书组合
  const paths = [
    { params: { category: 'designer', book: 'book1' } },
    { params: { category: 'engineering', book: 'book1' } },
    { params: { category: 'art', book: 'book1' } }
  ]
  return { paths, fallback: false }
}

// 根据动态参数拉取对应页面数据
export async function getStaticProps({ params }) {
  const bookData = await fetch(`你的内部数据接口地址/${params.category}/${params.book}`).then(res => res.json())
  return { props: { bookData } }
}