Next13路由组中自定义not-found页面失效问题求助

1. 确认文件结构合规 #

确保你的not-found.js/not-found.tsx和对应路由组的layout.js处于同一目录层级，正确结构示例：

app/
  (user)/
    layout.js
    not-found.js
    page.js
  (admin)/
    layout.js
    not-found.js
    page.js

不要将not-found.js放在路由组的子目录中，否则无法被路由组的layout捕获。

2. 手动触发notFound（针对动态路由/自定义场景） #

如果访问的是路由组内的动态路径（比如/(user)/profile/123但123不存在），需要在动态页面组件中主动抛出notFound，触发自定义404页面：

import { notFound } from 'next/navigation';

export default async function UserProfile({ params }) {
  const userData = await fetchUser(params.id);
  // 当数据不存在时触发自定义not-found
  if (!userData) {
    notFound();
  }
  return <div>用户信息页面</div>;
}

3. 验证App Router模式 #

确认你的项目使用的是Next.js 13+的App Router（而非传统Pages Router），Pages Router的404页面是404.js，和App Router的not-found.js不兼容。

4. 清除开发缓存 #

Next.js开发服务器的缓存可能导致页面未更新，执行以下操作后重启：

• 删除项目根目录下的.next文件夹
• 或者启动时添加清除缓存参数：npm run dev -- --clear-cache

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