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

生徒

「Next.jsって、ページごとに見た目を変えることはできるんですか？」

先生

「できます。Next.jsにはLayoutという仕組みがあり、ルートごとに切り替えられます。」

生徒

「ルートって、フォルダのことですか？」

先生

「その通りです。フォルダ構成がそのまま画面の構成につながるのがNext.jsの特徴です。」

1. Next.jsのLayoutとは何かを超かんたんに理解しよう

Next.jsのLayoutとは、すべてのページで共通して使う「外枠」のようなものです。パソコンで例えると、机の上に毎回同じデスクマットを敷いて、その上にノートや本を置くイメージです。

ヘッダーやフッター、メニューなど、毎回同じ表示にしたい部分をLayoutにまとめることで、ページごとに同じコードを書かなくて済みます。

2. ルートとは何か？フォルダとURLの関係

Next.jsでは、フォルダの構成がそのままURLになります。これを「ルーティング」と呼びますが、難しく考えなくて大丈夫です。

たとえば、appフォルダの中にblogフォルダを作ると、それは「/blog」というページのまとまりになります。

3. ルートごとにLayoutを切り替える基本構造

Next.jsでは、フォルダの中にlayout.jsxを置くことで、そのフォルダ配下のページすべてに同じLayoutが適用されます。


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

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

4. 複数ルートでLayoutを分ける具体例

たとえば、一般向けページと管理画面で、見た目を完全に変えたい場合があります。そんなときは、フォルダごとにLayoutを作ります。


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

（/admin配下のページだけ、管理画面専用のメニューが表示されます）

5. Layoutが自動で切り替わる仕組み

Next.jsでは、ページを表示するときに、「どのフォルダの中にあるか」を見てLayoutを決めます。

プログラムで条件分岐を書く必要はなく、フォルダにlayout.jsxを置くだけで自動的に切り替わるのが特徴です。

6. 子Layoutと親Layoutの関係

Layoutは重ねて使うこともできます。親フォルダのLayoutの中に、子フォルダのLayoutが入る形です。


export default function BlogLayout({ children }) {
  return (
    <section>
      <h1>ブログ専用レイアウト</h1>
      {children}
    </section>
  );
}

（全体Layoutの中に、ブログ専用の見出しが追加されます）

7. Templateとの違いをやさしく説明

Layoutは画面遷移しても状態が保たれますが、 Templateはページごとに作り直されます。

机の例で言うと、Layoutは「片付けない机」、 Templateは「毎回リセットされる机」です。

8. 初心者がつまずきやすい注意点

layout.jsxは必ずchildrenを受け取る必要があります。これがないと、ページの中身が表示されません。

また、HTMLタグを二重に書かないように注意すると、エラーを防ぎやすくなります。

Next.jsのLayoutをルート単位で切り替える方法を完全解説！初心者でもわかるNext.jsレイアウト入門