Menu
CoddyTech

布局回顾

本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 16 课,共 47 课。

challenge icon

挑战

中等

本章回顾:为 Coddy Eats 搭建外壳,添加共享导航栏和真实的标签页标题。

  1. 在 app/layout.jsx 中,在 <body> 内且位于 上方 的 {children} 之前,添加一个 <nav>,其 id="nav",其中包含一个指向 / 且 id="home-link" 的 <Link>,文本为 Home;再添加一个指向 /menu 且 id="menu-link" 的 <Link>,文本为 Menu。
  2. 仍在布局文件中,将 metadata 的标题改为 Coddy Eats。
  3. 在 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>
    );
}

Next.js 基础中的所有课