Next.js App Router子目录自定义404页面无法渲染问题排查

先明确Next.js App Router里not-found.tsx的生效逻辑：当访问某个路由分支下不存在的路径时，会渲染该路由分支里最近的父目录中的not-found.tsx。另外，带括号的目录（比如(paths)、(jobs)）仅用于整理文件，不影响路由匹配的层级。

针对你的场景调整方案 #

1. 根路径自定义404（访问myapp.com/blablabla-nothing-here触发） #

你把not-found.tsx放在app/(paths)目录下的思路是对的，但之前在app/not-found.tsx设置的全局404会优先覆盖所有子目录的自定义404。要让根分支的自定义404生效，必须删除app/not-found.tsx这个全局文件。

2. Jobs路由分支自定义404（访问myapp.com/jobs/blabla-no-job-cat-here触发） #

你当前把not-found.tsx放在app/(paths)/(jobs)/jobs/(cats)目录下，这个位置仅负责/jobs/(cats)子路径的404，无法覆盖整个/jobs分支。正确做法是将文件移动到app/(paths)/(jobs)/jobs目录下，和jobs目录内的page.tsx（如果存在）同级。这样只要访问/jobs/下不存在的子路径，就会触发这个自定义404。

验证步骤 #

• 按上述要求调整两个not-found.tsx的位置
• 重启Next.js开发服务器（避免缓存干扰）
• 分别访问两个错误路径，确认对应自定义404页面正常渲染

避坑提醒 #

• 带括号的路由组不改变路由层级，不要把not-found.tsx塞进路由组的嵌套目录来限制生效范围，必须放在实际路由段的同级目录下
• 全局app/not-found.tsx是兜底方案，只要它存在，所有未匹配到的路径都会优先使用它，因此需要分支自定义404时必须删除全局文件

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