Next.js嵌套可选catch-all路由报错，求正确文件夹结构实现方法

你遇到的错误是因为news/index.js（对应/news路由）和news/[[...rest]].js这个可选捕获所有路由的匹配范围重叠了——可选捕获路由会匹配包括/news在内的所有/news/*路径，和index.js的路由特异性完全一致，所以触发了冲突。

根据你要支持/news/title/tab这类多级嵌套路由的需求，给你两种可行的结构：

方案一：保留/news基础路由，同时支持多级嵌套路由 #

把可选捕获路由改成普通捕获所有路由（去掉外层的方括号），结构如下：

pages/
  news/
    [...rest].js
    index.js
  index.js

• news/index.js：专门处理/news路径
• news/[...rest].js：处理所有/news/xxx、/news/xxx/xxx这类多级嵌套路径，rest会是一个数组，比如访问/news/title/tab时，rest的值为['title', 'tab']

方案二：用单个路由处理所有/news相关路径 #

如果不需要单独的/news基础路由处理逻辑，直接删掉news/index.js，只保留可选捕获路由，结构如下：

pages/
  news/
    [[...rest]].js
  index.js

这样[[...rest]].js会同时处理/news（此时rest为空数组）和/news/title/tab这类多级路径。

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