Next.js app目录not-found页面与多根布局冲突问题求解

1. 先理清概念：路由组里的是嵌套布局，不是根布局 #

Next.js中**app/layout.tsx是唯一的全局根布局**，所有页面（包括路由组内的页面）都会嵌套在这个根布局之下。你在app/(routes)/layout.tsx创建的是嵌套布局，它会作为根布局的子容器存在，而非替代根布局。如果这个嵌套布局没生效，检查两点：

• 组件必须接收并渲染children属性，示例代码：

  export default function RoutesLayout({ children }: { children: React.ReactNode }) {
    return <div className="routes-wrap">{children}</div>;
  }
  

• 路由组内的页面（比如about/page.tsx）会自动应用该嵌套布局，无需额外配置，只要组件结构正确就会生效。

2. 解决not-found页面的生效问题 #

全局404与路由组专属404的差异 #

• app/not-found.tsx是全局404页面，访问任何不存在的路由（包括路由组外的路径）都会触发它；
• app/(routes)/not-found.tsx是该路由组专属的404页面，仅在两种场景下生效：访问该组内不存在的路由（比如/about/xxx），或者组内页面主动抛出404时。

你遇到组内not-found不生效的情况，大概率是以下原因：

• 访问的是路由组外的无效路由，此时优先触发全局404；
• 组内没有触发404的场景，比如未在页面中调用notFound()函数。

正确配置组内404的步骤 #

如果需要给(routes)组设置专属404，按以下操作：

1. 编写app/(routes)/not-found.tsx组件：

   export default function RoutesNotFound() {
     return <div>这个页面在当前路由组里不存在哦～</div>;
   }
   

2. 在组内页面中，当需要触发404时调用notFound()：

   import { notFound } from 'next/navigation';
   
   export default async function AboutPage() {
     // 示例：请求数据失败时触发404
     const res = await fetch('/api/about-info');
     if (!res.ok) {
       notFound();
     }
     const info = await res.json();
     return <div>{info.content}</div>;
   }
   

3. 访问/about/任意不存在的路径，就能看到组内的404页面了。

3. 推荐调整后的目录结构 #

app
> _components
> (routes)
>> about
>>> page.tsx
>> layout.tsx（仅作用于(routes)组内页面的嵌套布局）
>> not-found.tsx（(routes)组专属404）
> not-found.tsx（全局通用404）
> layout.tsx（全局根布局，所有页面都会继承）

核心规则再强调 #

• 根布局app/layout.tsx必须存在，是所有页面的顶层容器；
• 路由组内的布局是嵌套布局，仅影响组内的页面；
• 全局404优先级更高，只有访问组内无效路由时，才会显示组内的404页面。

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