まとめ：レイアウト
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 16/47。
チャレンジ
中級章のまとめ: Coddy Eats に共有ナビゲーションと実際のタブタイトルを持つシェルを与えます。
app/layout.jsxの<body>内かつ{children}の上に、id="nav"を持つ<nav>を追加します。その中に、テキストHomeを持つid="home-link"の/への<Link>と、テキストMenuを持つid="menu-link"の/menuへの<Link>を配置します。- レイアウト内で、
metadataのタイトルを正確にCoddy Eatsに変更します。 app/menu/page.jsx内で、タイトルがOur Menuとなるmetadataオブジェクトをexportし、メニュータブに名前が付けられるようにします。
テストでは両方のページのタブタイトルを読み取り、/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>
);
}