共享导航
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 12 课，共 47 课。
导航栏是布局中经典的内容：只需编写一次，就会出现在每个路由上，而且不会重新挂载。
// app/layout.jsx
import Link from 'next/link';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>
<Link href="/">Home</Link>
</nav>
{children}
</body>
</html>
);
}注意 {children} 的位置：它在导航栏之后。你放在它前面的内容会显示在页面上方，放在它后面的内容会显示在下方。布局只是 JSX。唯一的规则是，{children} 必须放在其中某个位置。
现在，布局由你掌控，不再是固定的。添加导航栏，然后看着它在页面内容变化时保持不动。
挑战
简单为 Coddy Eats 添加一个出现在每个页面上的导航栏。
在 app/layout.jsx 中，放在 <body> 内且位于 上方 {children} 的位置，添加：
- 一个带有
id="nav"的<nav> - 在其中，添加一个指向
/、带有id="home-link"且文本为Home的<Link> - 再添加一个指向
/menu、带有id="menu-link"且文本为Menu的<Link>
这些页面已锁定：你只能修改布局。之后，测试会访问 /menu，并检查导航栏是否仍显示在屏幕上。
亲手试试
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
