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

生徒

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

先生

「できますよ。Next.jsではLayoutやRoute Groupを使うことで、ページ構成を整理できます。」

生徒

「Route Groupって何ですか？フォルダみたいなものですか？」

先生

「まさにフォルダ整理の考え方です。画面の見た目を整理するための仕組みですね。」

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

Next.jsのLayoutとは、複数のページで共通して使う画面の枠組みのことです。たとえば、どのページにも表示されるヘッダーやフッターはLayoutにまとめておくと便利です。パソコンで言うと、毎回同じ机や椅子を使うような感覚です。

Layoutを使うことで、同じコードを何度も書かなくて済み、ページ全体の構造も分かりやすくなります。 Next.jsではlayout.jsというファイル名を使ってLayoutを定義します。

2. Route Groupとは？フォルダ整理の考え方

Route Groupとは、URLには影響を与えずにフォルダをまとめる仕組みです。フォルダ名を()で囲むことで、見た目の構成だけを整理できます。本棚の中でジャンルごとに仕切りを作るイメージです。

これにより、管理画面用のLayoutや、ログイン画面用のLayoutなどを分けて作ることができます。 URLが変わらないので、利用者には影響が出ません。

3. Route Groupを使った基本的なLayout構成

まずは基本的な構成を見てみましょう。 Route Groupを使うと、ページの役割ごとにLayoutを切り替えられます。


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

ヘッダーとフッターがすべてのページに表示され、その間に各ページの内容が表示されます。

4. Route GroupでLayoutを分ける例

たとえば、一般向けページと管理画面で見た目を変えたい場合があります。 Route Groupを使えば、それぞれ専用のLayoutを持たせられます。


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

管理画面では専用のメニューが表示され、通常ページとは違う構成になります。

5. Templateとの違いを理解しよう

Next.jsにはLayoutと似た仕組みとしてTemplateがあります。 Layoutは画面遷移しても状態を保ちますが、Templateはページが切り替わるたびに初期化されます。電源を入れたままの部屋と、毎回片付け直す部屋の違いだと考えると分かりやすいです。


export default function Template({ children }) {
  return <section>{children}</section>;
}

ページを移動するたびに、Templateの中身は新しく作り直されます。

6. 複雑なLayout構成でも迷わない考え方

Layoutが増えてくると、どこで何が使われているのか分からなくなりがちです。そんなときは、画面の役割ごとにRoute Groupを分けるのがポイントです。「誰が使う画面か」「何のための画面か」を基準に考えると整理しやすくなります。

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

Route Groupのフォルダ名はURLに反映されないため、最初は混乱しやすいです。また、Layoutは自動的に適用されるため、意図しない見た目になることもあります。その場合は、どの階層にlayout.jsがあるかを確認しましょう。

8. Route Groupを使うメリットまとめ的な整理

Route Groupを使うことで、Next.jsのLayout構成はとても分かりやすくなります。見た目を整理しながら、URLを変えずに管理できる点が大きな特徴です。初心者の方でも、フォルダ整理の感覚で理解できるのが魅力です。

Next.jsのRoute Groupを使った複雑なLayout構成を完全解説！初心者でもわかるNext.jsレイアウト設計