根布局

每个应用都有一些不会变化的部分：页面框架、页眉和页脚。在 Next.js 中，这些内容放在 布局 中，最外层的布局称为 根布局。

这就是你一直锁定在面前的文件：

// app/layout.jsx
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

它和页面有三点不同：

• 它是必需的<html> 和 <body> 的文件
• 它会接收 children，也就是 URL 匹配到的页面。如果忘记渲染 {children}，应用就只会显示外壳，什么内容也没有。
• 它会包裹应用中的每一个路由，无需任何页面导入它

它会一直存在

这部分会让人感到意外。当用户从 / 切换到 /menu 时，布局不会重新创建。Next.js 会替换布局中的页面，而布局本身保持不变。

这样，共享页眉就不会闪烁，侧边栏中的视频会继续播放，布局中的任何状态都能在导航过程中保留下来：打开的菜单会保持打开，滚动位置也会保持不变。布局是一个长期存在的框架，页面会在其中不断切换。

有一点值得记住：由于布局在导航时不会重新运行，因此无法读取当前页面的 searchParams。它不会监听这种变化。