Next.js 13自定义NotFound页面不生效问题排查求助

可能的原因及对应解决步骤： #

• 文件位置错误
  Next.js 13的路由规则对404.js的位置有严格要求：

  • 若使用App Router（项目有app目录）：404.js必须放在app目录的根层级（即app/404.js），才能处理全局的错误路由；如果是要处理某个嵌套路由下的404，才放在对应路由段的子目录（比如app/blog/404.js处理/blog/*的错误）。如果你的404.js放在了components或其他非指定位置，Next.js会无法识别，从而显示默认404页面。
  • 若使用Page Router（项目有pages目录）：404.js必须放在pages目录的根层级（pages/404.js）。

• 路由模式混淆
  如果项目同时存在app和pages目录，Next.js会优先处理pages目录下的路由规则。此时若pages目录中没有自定义404.js，就会显示默认404。

• 缓存或开发服务器状态问题
  开发环境下Next.js可能存在路由缓存，导致新添加的404.js不生效。直接重启开发服务器（终止当前服务后重新执行npm run dev），并清除浏览器缓存后再测试。

• 文件名错误
  必须严格命名为404.js（或404.tsx），大小写敏感，不能使用NotFound.js或其他名称。

额外提示 #

你的代码中添加了'use client'，其实在Next.js 13中，404.js可以作为服务器组件使用，不需要强制添加客户端标识，去掉也不会影响功能。

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