Next.js中如何为not-found.tsx配置自定义布局并避免双重嵌套？

针对你已经按匿名/认证拆分路由组布局的场景，要避免根目录添加layout.tsx导致的双重嵌套问题，有两种简单可行的方案：

方案一：根目录添加空布局（推荐） #

在/app目录下创建一个仅传递子内容的空layout.tsx，既满足not-found.tsx的布局要求，又不会干扰原有路由组的布局嵌套：

1. 创建根布局文件：

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 仅返回children，不添加额外布局结构
  return children;
}

2. 创建全局404页面：

// app/not-found.tsx
export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center h-screen gap-4">
      <h1 className="text-4xl font-bold">404 页面不存在</h1>
      <p>你访问的页面可能已删除或地址有误</p>
      <button onClick={() => window.history.back()} className="px-4 py-2 bg-blue-600 text-white rounded">返回上页</button>
    </div>
  );
}

如果需要全局公共样式或元数据（如<html>/<body>标签），可以把这些内容放在根布局里，同时确保(anon)和(auth)的布局不再重复定义这些标签：

// app/layout.tsx
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className="min-h-screen">{children}</body>
    </html>
  );
}

方案二：调整路由结构隔离根布局 #

如果根布局需要专门给404页面使用，不想和业务页面共享，可以把原有业务页面移到新的路由组中，让根布局仅作用于404：

调整后的目录结构：

/app
    layout.tsx  # 仅给not-found使用的布局
    not-found.tsx
    /(business)
        /(pages)
            /(anon)
                layout.tsx
                page.tsx
                /about
                    page.tsx
                /contact
                    page.tsx
                /login
                    page.tsx
            /(auth)
                layout.tsx
                /dashboard
                    page.tsx

此时根布局可以专门写404页面需要的样式结构，而(business)路由组下的页面不会继承根布局（路由组不会改变路由路径，业务页面的访问路径保持不变）。

关键说明 #

Next.js 要求not-found.tsx必须有同级的layout.tsx，但根目录的layout.tsx默认会嵌套所有子路由的布局。通过上述方案，要么让根布局仅做内容传递，要么通过路由组隔离业务页面和根布局，就能既实现自定义404，又避免双重嵌套问题。

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