1. Next.jsのLayoutとは何か？

Next.jsのLayoutとは、Webページの中で何度も繰り返し使われる見た目や構造を、ひとまとめにした仕組みです。たとえば、ページの上に表示されるヘッダー、下に表示されるフッター、横に表示されるメニューなどは、どのページでも同じ内容になることが多いです。

毎回同じコードを書くのは大変なので、共通部分をLayoutとしてまとめておくことで、効率よくページを作れるようになります。Next.jsでは、このLayoutの仕組みが最初から用意されています。

2. Layoutが必要になる理由

プログラミング未経験の方は、「そもそもなぜLayoutが必要なの？」と感じるかもしれません。これは、学校のプリントに例えると分かりやすいです。

どのプリントにも、学校名やクラス名が毎回同じ場所に書いてありますよね。 Webサイトでも同じで、ページが変わっても共通して表示したい部分があります。それを毎回書くのではなく、一度作って使い回すための仕組みがLayoutです。

3. Next.jsのLayoutの基本構造

Next.jsでは、appフォルダの中にlayout.jsxやlayout.tsxというファイルを作ることで、 Layoutを定義します。このファイルが、そのフォルダ配下のページ全体に適用されます。


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>共通ヘッダー</header>
        {children}
        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

（どのページを表示しても、上に「共通ヘッダー」、下に「共通フッター」が表示されます）

4. childrenとは何か？

Layoutのコードを見ると、{children}という見慣れない書き方があります。これは「このLayoutの中に表示されるページの内容」を意味します。

箱の中に紙を入れるイメージをすると分かりやすいです。箱がLayoutで、中に入る紙が各ページの内容です。 Layoutは外枠を決めて、中身はページごとに変わります。

5. ページごとのLayoutの使い分け

Next.jsでは、フォルダごとにLayoutを分けることもできます。たとえば、管理画面だけデザインを変えたい場合、そのフォルダに専用のLayoutを作ります。


export default function AdminLayout({ children }) {
  return (
    <div>
      <nav>管理画面メニュー</nav>
      <main>{children}</main>
    </div>
  );
}

（管理画面のページでは、専用のメニューが表示されます）

6. Layoutと通常のコンポーネントの違い

Next.jsでは、コンポーネントという部品を作って画面を組み立てます。 Layoutも見た目はコンポーネントに似ていますが、大きな違いがあります。

Layoutはページが切り替わっても再読み込みされにくく、共通部分を安定して表示し続ける役割を持っています。そのため、ナビゲーションやヘッダーに向いています。

7. Layoutの中でスタイルを指定する

Layoutでは、文字の大きさや背景色などのデザインもまとめて指定できます。これにより、サイト全体の見た目を統一できます。


export default function RootLayout({ children }) {
  return (
    <div style={{ backgroundColor: "#f8f9fa" }}>
      <h1>サイトタイトル</h1>
      {children}
    </div>
  );
}

（すべてのページの背景色が同じになり、上にタイトルが表示されます）