Next.js动态路由下嵌套tags子页面访问报404如何解决

问题根因 #

404是违反Next.js路由匹配约定导致的：如果对应动态段（也就是匹配blender这类用户自定义值的路由段）的节点是单文件而非文件夹，Next.js会将其判定为该路由层级的最终匹配节点，后续拼接的/tags路径会被直接判定为不存在。 #

按你使用的路由模式选择正确配置 #

App Router（Next.js 13+ 官方推荐模式） #

按如下层级创建目录，核心是把动态段设为同名文件夹，而非单文件：

app/
└── dashboard/
    └── repository/
        └── [repoName]/  // 动态段，命名用方括号包裹参数名
            ├── page.tsx // 该文件对应/dashboard/repository/[自定义仓库名]路径，也就是你之前能正常访问的blender页面
            └── tags/
                └── page.tsx // 该文件对应/dashboard/repository/[自定义仓库名]/tags路径，也就是你要实现的tags子页面

常见踩坑：动态段必须是同名文件夹，不能是单页面文件。如果把动态段做成和repository文件夹平级的[repoName].tsx单文件，Next.js不会识别该层级下的任何子路由，所有带后缀的路径都会返回404。

Pages Router（Next.js 旧版路由模式） #

如果项目使用pages目录作为路由根目录，按如下层级配置：

pages/
└── dashboard/
    └── repository/
        └── [repoName]/ // 动态段同名文件夹
            ├── index.tsx // 对应/dashboard/repository/[自定义仓库名]根页面
            └── tags.tsx // 直接放在动态段文件夹下，对应/dashboard/repository/[自定义仓库名]/tags路径

配置后校验步骤 #

• 重启本地开发服务：执行npm run dev或者对应包管理器的dev命令，Next.js对新增嵌套路由的热更新偶现失效，重启后可正常识别新结构
• 不要在动态段的父层级（也就是和[repoName]平级的位置）创建tags相关文件/文件夹，这种结构匹配的是/dashboard/repository/tags路径，不属于动态段下的子路由
• 如果该路由层级下配置了捕获所有路由（比如[...slug]写法），要把tags静态路由放在捕获路由同层级靠前的位置，避免捕获路由优先匹配吞掉tags路径

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