在Next.js的pages目录下如何创建嵌套动态路由访问[id]/routeName路径

你需要按照如下结构创建pages目录下的文件和文件夹：

pages/
└── course/
    ├── [id].js/tsx          # 匹配 /course/[id] 路径
    └── [id]/
        └── [routeName].js/tsx  # 匹配 /course/[id]/routeName 路径

规则说明 #

• 首先在pages目录下创建course文件夹，对应路由前缀/course
• 直接放在course目录下的[id].js（或tsx）文件负责匹配 /course/[id] 路径，你可以在文件内通过Next.js的useRouter()钩子的query.id属性获取路径中的id参数
• 若要匹配二级子路径，在course目录下新建同名的[id]文件夹，在该文件夹内创建路由文件：
  • 如果routeName是固定值（比如固定为join），直接创建join.js文件即可，对应路径/course/[id]/join
  • 如果routeName是动态可变参数，创建[routeName].js文件，可匹配所有/course/[id]/xxx格式的路径，通过query.routeName获取该参数值

提示：同名的[id].js文件和[id]文件夹可以共存，Next.js路由匹配优先级为「层级更深的路由 > 层级浅的路由」，不会出现匹配冲突。

内容的提问来源于stack exchange，提问作者An in real life