布局回顾
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 16 课,共 47 课。
挑战
中等本章回顾:为 Coddy Eats 搭建外壳,添加共享导航栏和真实的标签页标题。
- 在
app/layout.jsx中,在<body>内且位于 上方 的{children}之前,添加一个<nav>,其id="nav",其中包含一个指向/且id="home-link"的<Link>,文本为Home;再添加一个指向/menu且id="menu-link"的<Link>,文本为Menu。 - 仍在布局文件中,将
metadata的标题改为Coddy Eats。 - 在
app/menu/page.jsx中,导出一个标题为Our Menu的metadata对象,让菜单页显示自己的标签页名称。
测试会读取两个页面的标签页标题,并检查跳转到 /menu 后导航栏仍然存在。
亲手试试
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}