NextJSにおけるサイトレイアウトのコンテンツ

前回のレッスンで取り上げ始めた、 基本的なサイトレイアウトについて 考えてみましょう：

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

ご覧の通り、サイトレイアウトは 関数コンポーネントとして表現されています。 関数のパラメータにはオブジェクトが渡され、 そこからキー children を 対応する変数に展開しています。 この変数には、リクエストされたURLに対応する ファイル page.jsx の内容が 格納されています。

つまり、ファイル layout.jsx には サイトのレイアウトが格納されており、 変数 children を使って、 ページコンテンツが挿入されるべき レイアウト内の位置を指定しているのです。

例として、ページのコンテンツを 何らかのタグで囲ってみましょう：

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <main>
          {children}
        </main>
      </body>
    </html>
  );
}