ネストされたレイアウト

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 13/47。

ルートレイアウトだけが唯一のレイアウトではありません。layout.jsx を任意のフォルダに配置すると、そのフォルダのルート（およびその配下のルートのみ）をラップします。

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

/menu/pizza にアクセスすると、Next.js はこれらを外側から内側へとネストします：

RootLayout
    MenuLayout
        PizzaPage

/ にアクセスするとルートの layout のみが実行されます。menu の layout はその URL のパスに含まれていないため、表示されることはありません。

入れ子になったレイアウト（nested layout）は、ルートレイアウトとまったく同じように記述しますが、シェル部分はありません。つまり、<html> も <body> も不要です。children を受け取るコンポーネントを記述するだけです。

これにより、現在のURLに関するifステートメントを1つも記述することなく、サイトの特定のセクションに独自のサイドバー、独自のタブ、独自のヘッダーを持たせることができます。

チャレンジ

簡単

メニューセクションには専用のヘッダーが必要です：/menu とそのディッシュ（料理）ページには必要ですが、それ以外の場所には表示しません。

app/menu/layout.jsx は既に存在しており、children をそのまま渡しています。その <section> の内部、{children} の上に、以下を追加してください：

id="menu-header" とテキスト Menu を持った <h2>

テストでは、ヘッダーが /menu および /menu/pizza に表示され、/ に戻ったときには表示されないことを確認します。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}