嵌套布局
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 13 课，共 47 课。
根布局并不是唯一的布局。在任意文件夹中添加一个 layout.jsx，它就会包裹该文件夹的路由，而且只包裹这些路由。
app/
layout.jsx wraps EVERYTHING
page.jsx /
menu/
layout.jsx wraps /menu and everything under it
page.jsx /menu
pizza/
page.jsx /menu/pizza访问 /menu/pizza，Next.js 会由外向内嵌套它们：
RootLayout
MenuLayout
PizzaPage访问 / 时，只会运行根布局：菜单布局不在该 URL 的路径中，因此不会显示。
嵌套布局的写法和根布局完全一样，只是不包含外壳：没有 <html>，也没有 <body>。它只是一个接收 children 的组件。
这样，网站的一个单元就能拥有自己的侧边栏、自己的标签页和自己的标题，而不需要编写任何关于当前 URL 的 if 语句。
挑战
简单菜单单元需要有自己的标题：它应显示在 /menu 和菜品页面上，但不应显示在其他任何页面上。
app/menu/layout.jsx 已存在，并会直接传递 children。在它的 <section> 内部、{children} 上方，添加：
- 一个
<h2>，其id="menu-header"，文本为Menu
测试会检查标题是否显示在 /menu 和 /menu/pizza 上，以及返回 / 后标题是否消失。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
