先生と生徒の会話形式で理解しよう

生徒

「Next.jsって、毎回同じヘッダーやフッターを書かないといけないんですか？」

先生

「Next.jsには、ページ全体で共通の見た目をまとめて管理できる仕組みがあります。」

生徒

「パソコンを触ったことがなくても使えますか？」

先生

「大丈夫です。画面の上下にある共通パーツを作る感覚で覚えられますよ。」

生徒

「それなら安心です。やり方を教えてください！」

1. Next.jsのLayoutとは何かを超かんたんに説明

Next.jsのLayout（レイアウト）とは、すべてのページで共通して使う「外枠」を作る仕組みです。たとえば、どのページを見ても同じ場所に表示されるヘッダーやフッターがあります。 Layoutは、それらを一度だけ書いて、全ページに自動で表示させるための便利な機能です。

現実のたとえで言うと、ノートの表紙やページ番号のような存在です。中身が変わっても、外側のデザインは毎回同じ、というイメージを持つと理解しやすくなります。

2. ヘッダー・フッターが必要な理由

Webサイトでは、どのページでも「サイト名」「メニュー」「コピーライト」などを同じ場所に表示することが多いです。これを毎ページ手作業で書くと、修正がとても大変になります。

Next.jsのLayoutを使えば、1か所を直すだけで全ページが一気に更新されます。初心者ほど、この仕組みを最初に覚えておくと後で困りません。

3. Layoutファイルの基本的な場所と役割

Next.js（App Router）では、appフォルダの中に layout.jsxというファイルを作ります。このファイルが、サイト全体の土台になります。

layout.jsxには、「ここにページの中身を入れる」という目印を書きます。それが{children}という特別な書き方です。

4. 一番シンプルなLayoutのサンプル


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

このコードは、「ページの中身をそのまま表示するだけ」のLayoutです。まだヘッダーやフッターはありませんが、土台としてとても重要です。

5. 共通ヘッダーをLayoutで作る方法


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <h1>サンプルサイト</h1>
        </header>
        {children}
      </body>
    </html>
  );
}

（画面の上に「サンプルサイト」という文字が表示され、どのページでも同じ見た目になります）

<header>は、ページの上部を表すHTMLの部品です。難しく考えず、「上に表示される箱」だと思ってください。

6. フッターを追加して上下を共通にする


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <h1>サンプルサイト</h1>
        </header>

        <main>
          {children}
        </main>

        <footer>
          <p>© 2026 Sample Site</p>
        </footer>
      </body>
    </html>
  );
}

（ページの一番下にコピーライトが表示され、どの画面でも共通になります）

<footer>は、ページの下に表示されるエリアです。サイト情報や著作権表示を書くことが多い場所です。

7. childrenの意味をやさしく理解しよう

childrenとは、「Layoutの中に差し込まれるページの中身」です。各ページで書いた内容が、この場所に自動で入ります。

たとえるなら、お弁当箱がLayoutで、おかずがchildrenです。箱は同じでも、中身だけが毎回変わります。

8. ページ側のシンプルな例


export default function Page() {
  return (
    <div>
      <h2>トップページ</h2>
      <p>ここがページごとの内容です。</p>
    </div>
  );
}

（ヘッダーとフッターに挟まれて、ページの内容が中央に表示されます）

ページ側では、Layoutを意識する必要はありません。普通に画面の中身を書くと、自動で共通デザインに包まれます。

9. Layoutを使うと何が楽になるのか

Next.jsのLayoutを使うと、デザインの管理がとても楽になります。ヘッダーやフッターを1回書くだけで済み、修正も一瞬です。

プログラミング未経験でも、「共通部分をまとめる箱」として覚えれば十分です。最初につまずきやすい部分ですが、ここを理解すると一気に世界が広がります。

Next.jsのLayoutで共通ヘッダー・フッターを作る方法を完全解説！初心者でもわかるNext.js Layoutの使い方