Next.js App Router：如何规避默认布局使用自定义页面布局？

App Router和Page Router的布局逻辑完全不同，它是基于文件系统路由自动嵌套布局，不需要手动在路由配置里绑定，核心靠文件夹结构来关联布局与页面。结合你的现有代码，给你两种常见场景的实现方案：

1. 全局根布局 + 特定路由专属布局 #

你当前的app/layout.jsx是全局根布局，所有页面都会自动嵌套在这个布局里（也就是所有页面都会带上你写的<Header />）。如果想让某一类路由（比如/weather下的所有页面）使用你第二个带LayoutTailwind的布局，只需要按以下步骤操作：

• 创建对应路由的文件夹，比如app/weather
• 将你的第二个布局文件重命名为layout.jsx，放到app/weather文件夹下，代码保持不变：

import LayoutTailwind from "../components/LayoutTailwind"

const Layout = ({ children }) => {
    return (
        <>
            <LayoutTailwind />
            {children}
        </>
    )
}

export default Layout

• 在app/weather文件夹下创建page.jsx，写该路由的页面内容。

此时页面的嵌套顺序是：根布局的<Header /> → weather文件夹布局的<LayoutTailwind /> → weather/page.jsx的内容，完全自动生效，不需要手动引入布局。

2. 多组独立布局（部分页面不需要全局Header） #

如果需要让某些页面不使用根布局的<Header />，可以用路由组来实现：

• 创建两个路由组文件夹：app/(with-header)和app/(without-header)
• 把需要保留全局Header的页面放到(with-header)文件夹下，不需要的放到(without-header)下
• 在(without-header)文件夹里创建自己的layout.jsx（注意：全局的app/layout.jsx仍然必须存在，但路由组内的布局可以覆盖部分结构），比如：

import LayoutTailwind from "../components/LayoutTailwind"

export default function NoHeaderLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <LayoutTailwind />
        {children}
      </body>
    </html>
  )
}

这样(without-header)下的页面就会使用这个不带全局Header的布局，而(with-header)下的页面仍然继承全局根布局。

关键规则总结 #

• app/layout.jsx是全局根布局，所有路由都会嵌套在它里面，必须存在
• 任意路由文件夹下的layout.jsx会自动成为该文件夹下所有页面的父布局，并且嵌套在更上层的布局（比如根布局）里
• 路由组（带括号的文件夹名）不会影响URL路径，只是用来分组管理布局与页面

内容的提问来源于stack exchange，提问作者Sayeed Mahdi Mousavi