公式サイトを見ながら試します。
ルートレイアウト
自動生成されたファイルを元にしてappディレクトリ以下のlayout.tsxとpage.tsxを編集します。
% tree src/app
src/app
├── globals.css
├── head.tsx
├── layout.tsx <-編集する
├── page.module.css
└── page.tsx <- 編集する// src/app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<header>root layout</header>
{children}
</body>
</html>
);
}// src/app/page.tsx
export default function Home() {
return <main>home page</main>;
}http://localhost:3000/ を開くとsrc/app/layout.tsxに書いたheaderとsrc/app/page.tsxに書いたmainが表示されました。
src/app/layout.tsx のようにappディレクトリにある layout.tsx はルートレイアウトと呼ばれます。ルートレイアウトはappディレクトリ以下に必ず存在していなければならず、全てのページで共通に表示したいものを記述する役割を担います。
ネストレイアウト
appディレクトリ以下にdashboardディレクトリを作りその下にlayout.tsxとpage.tsxを追加します。
src/app
├── dashboard
│ ├── layout.tsx
│ └── page.tsx
├── globals.css
├── head.tsx
├── layout.tsx
├── page.module.css
└── page.tsx// src/app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<h1>Dashboard</h1>
{children}
</>
);
}// src/app/dashboard/page.tsx
export default function Page() {
return <>dashboard page</>;
}http://localhost:3000/dashboard を開いて確認します。ルートレイアウトが同じように表示されつつ src/app/dashboard/layout.tsx の内容も表示されました。
src/app/dashboard/layout.tsx のようにルートセグメントに追加したレイアウトをネストレイアウトと呼びます。ネストレイアウトには特定のルートセグメント以下に共通で表示したい内容を記述します。
コメント