Next.js如何配置支持可选子分类的分类商品动态路由？

该需求完全可以实现，根据你使用的Next.js版本，选对应方案即可：

方案1：可选捕获所有路由段（推荐，Next.js 10及以上版本支持） #

直接调整现有路由文件的路径，把原来的/[category]/[item].js重命名为/[category]/[[...slug]].js即可。

• 双层中括号包裹的[[...slug]]是Next.js原生支持的可选动态路由段，可以自动匹配0到多层的后续路径，完全覆盖你需要的两种路径场景：
  • 访问/pizza/four-seasons时，路由参数解析为 { category: "pizza", slug: ["four-seasons"] }，取slug[0]就是商品标识，对应无子分类的场景
  • 访问/pizza/traditional/four-seasons时，路由参数解析为 { category: "pizza", slug: ["traditional", "four-seasons"] }，此时slug[0]为子分类标识，slug[1]为商品标识，对应带子分类的场景
• 页面逻辑里只需要判断slug数组的长度，走不同的数据查询分支即可，不需要维护两套重复的页面代码。
• 如果使用Next.js 13+的App Router，逻辑完全一致，只需要把文件结构调整为/[category]/[[...slug]]/page.js即可。

方案2：双路由文件适配（兼容Next.js 10以下老版本） #

如果你的项目用的是不支持可选捕获路由的老版本，直接按路径结构创建两个路由文件即可，Next.js的路由匹配规则会优先命中层级更深的动态路由，不会出现冲突：

• 保留原有/[category]/[item].js，处理两层路径的无子分类商品访问
• 新建/[category]/[subcategory]/[item].js，处理三层路径的带子分类商品访问
• 这种写法建议把商品信息查询、页面渲染的公共逻辑抽离为独立组件，两个路由文件分别解析好参数后传入公共组件，避免代码重复。

避坑提示：不要用根路径下的单层捕获路由/[...all].js匹配全路径，这类路由的匹配优先级最低，很容易和站点内其他固定路径（如/about、/cart）产生匹配冲突。

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