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

生徒

「Next.jsって、ページごとに見た目を変えるのは大変じゃないですか？」

先生

「Next.jsにはLayoutという仕組みがあって、共通の見た目をまとめられます。」

生徒

「ページが増えても管理しやすくなるんですか？」

先生

「はい。さらに複数階層のLayoutを使えば、大規模な画面構成も整理できます。」

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

Next.jsのLayoutとは、複数のページで共通して使う画面の枠組みのことです。たとえば、ヘッダーやフッター、サイドメニューなど、どのページにも表示したい部分をまとめて管理できます。現実世界で例えると、家の間取りのようなものです。部屋ごとに家具は違っても、玄関や廊下は共通ですよね。 Layoutは、その共通部分を一か所にまとめる役割を持っています。

2. appディレクトリとLayoutの基本構造

Next.jsでは、appディレクトリを使って画面構成を管理します。 appの中に置いたlayout.tsxやlayout.jsxは、その階層以下のページすべてに適用されます。フォルダ構造がそのまま画面の構造になるので、初心者でも直感的に理解しやすいのが特徴です。


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

すべてのページで「共通ヘッダー」と「共通フッター」が表示されます。

3. 複数階層Layoutの考え方

複数階層Layoutとは、フォルダごとに異なるLayoutを持たせる設計方法です。たとえば、管理画面と一般ユーザー画面で見た目を分けたい場合に便利です。建物で言うと、1階と2階で内装が違うイメージです。

4. フォルダごとにLayoutを分ける方法

app/dashboard/layout.tsxのように、フォルダの中にLayoutを置くことで、そのフォルダ専用の見た目を作れます。


export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <aside>サイドメニュー</aside>
      <main>{children}</main>
    </div>
  );
}

dashboard配下のページだけにサイドメニューが表示されます。

5. 親Layoutと子Layoutの関係

複数階層Layoutでは、親のLayoutの中に子のLayoutが重なって表示されます。つまり、外側から順番に包み込まれる仕組みです。箱の中に箱を入れるようなイメージを持つと理解しやすくなります。


export default function Page() {
  return <h1>ダッシュボードトップ</h1>;
}

6. Templateとの違いを理解する

Next.jsにはLayoutと似た機能としてTemplateがあります。 Layoutは画面遷移しても状態が保持されますが、 Templateはページが切り替わるたびに初期化されます。フォームやアニメーションのリセットが必要な場合に使われます。


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

7. 大規模UIで複数階層Layoutを使うメリット

大規模なUIでは、画面数が増えるほど管理が難しくなります。複数階層Layoutを使うことで、共通部分と個別部分を明確に分けられます。その結果、修正箇所が少なくなり、作業ミスも減らせます。

8. 初心者がつまずきやすいポイント

初心者がよく混乱するのは、どのLayoutがどこに適用されているか分からなくなる点です。その場合は、フォルダ構成を紙に書き出して整理すると理解しやすくなります。無理に複雑な構成にせず、小さく分けて考えることが大切です。

Next.jsの複数階層Layoutで大規模UIを構築する方法｜初心者でもわかるNext.jsレイアウト設計