ルートレイアウト
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 11/47。
すべてのアプリには、ページのシェル、ヘッダー、フッターなど、決して変化しない部分があります。Next.jsではこれらはレイアウトの中に配置され、最も外側にあるものはルートレイアウトと呼ばれます。
これは、最初から目の前に表示されていたファイルです：
// app/layout.jsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}ページとは異なる点が3つあります。
- これは必須であり、
<html>と<body>をレンダリングする唯一のファイルです。 - URLに一致したページが何であれ、
childrenを受け取ります。{children}のレンダリングを忘れると、appはシェル以外何も表示しなくなります。 - ページがそれをインポートすることなく、
app内のすべてのルートをラップします。
永続化されます
ここが驚かれるポイントです。ユーザーが / から /menu に移動したとき、レイアウトは再作成されません。Next.js はその内部のページを差し替えるだけで、レイアウトには手を加えません。
そのため、共有ヘッダーがチラつくことがなく、サイドバーの動画は再生され続け、レイアウト内に存在するあらゆる状態がナビゲーションを越えて維持されます。開いたメニューは開いたままになり、スクロール位置も保持されます。レイアウトは長寿命のフレームであり、ページはその内部で入れ替わります。
覚えておく価値のある結果が1つあります。レイアウトはナビゲーション時に再実行されないため、現在のページの searchParams を読み取ることができません。変更を監視していないのです。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
