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

生徒

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

先生

「できます。Next.jsにはLayoutという仕組みがあります。」

生徒

「全部同じ見た目じゃなくて、一部だけ共通にしたい場合はどうするんですか？」

先生

「そのときに使うのがNested Layout、つまり入れ子レイアウトです。」

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

Next.jsのLayoutとは、複数のページで共通して使う見た目や構造をまとめた仕組みです。たとえば、どのページにも表示されるヘッダーやフッター、メニューなどを毎回書くのは大変です。 Layoutを使えば、それらを一か所にまとめて管理できます。

パソコン初心者の方は、Layoutを「建物の骨組み」と考えると分かりやすいです。部屋の配置は同じで、中の家具だけを変えるイメージです。

2. appディレクトリとlayout.tsxの基本

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

layout.tsxでは、childrenという特別な値を使います。 childrenとは「その場所に表示される中身」という意味です。


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

3. Nested Layout（入れ子レイアウト）とは？

Nested Layoutとは、Layoutの中にさらにLayoutを重ねる仕組みです。大きな共通レイアウトの中に、特定のページ専用のレイアウトを追加できます。

例えるなら、家全体の間取りがあり、その中に「仕事部屋だけ特別な配置」がある状態です。これにより、管理画面だけ違うデザインにする、といったことが簡単にできます。

4. フォルダ構成で理解するNested Layout

Next.jsでは、フォルダ構成がそのまま画面構造に反映されます。フォルダごとにlayout.tsxを置くことで、Nested Layoutが実現できます。


app/
 ├ layout.tsx
 ├ page.tsx
 └ dashboard/
    ├ layout.tsx
    └ page.tsx

この場合、dashboardページでは、全体のLayoutとdashboard専用Layoutの両方が適用されます。

5. 子レイアウトの具体的な書き方

dashboardフォルダの中にlayout.tsxを作成すると、そのフォルダ内だけに適用されるレイアウトになります。


export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>ダッシュボード専用メニュー</nav>
      <div>{children}</div>
    </section>
  );
}

（通常ページでは共通ヘッダーとフッターのみ表示され、ダッシュボードでは専用メニューが追加されます）

6. ページ側のコードはシンプルでOK

Nested Layoutを使うと、ページ側のコードはとてもシンプルになります。見た目の構造を考えなくてよいので、内容だけに集中できます。


export default function DashboardPage() {
  return <h1>ダッシュボード画面</h1>;
}

7. Templateとの違いも理解しよう

Next.jsにはLayoutとよく似たTemplateという仕組みもあります。 Layoutはページを移動しても状態が保たれますが、 Templateはページごとに毎回作り直されます。

入れ子レイアウトはLayoutで使うのが基本で、共通の見た目を安定して表示したいときに向いています。

8. Nested Layoutを使うメリット

Nested Layoutを使うことで、コードの整理がしやすくなり、修正も一か所で済むようになります。

初心者の方にとっては、「どこに何を書けばいいか」が明確になる点が大きなメリットです。フォルダ構成を見るだけで、画面の構造が理解できるようになります。

まとめ

今回の記事では、Next.jsにおけるNested Layout、つまり入れ子レイアウトの考え方と使い方について、初心者の方でも理解できるように順を追って解説してきました。 Next.jsのLayoutは、複数のページで共通する見た目や構造を一元管理するための重要な仕組みです。ヘッダーやフッター、ナビゲーションメニューのように、どのページでも表示したい要素をまとめて定義することで、コードの重複を防ぎ、保守性を高めることができます。特にappディレクトリとlayout.tsxの関係を理解することは、Next.jsの画面設計を学ぶ上で欠かせません。

Nested Layoutは、そのLayoutをさらに階層化して使える仕組みです。全体に共通するレイアウトの中に、特定のページや機能専用のレイアウトを重ねることで、柔軟な画面構成が可能になります。例えば、通常のページと管理画面やダッシュボードで見た目を変えたい場合でも、Nested Layoutを使えば無理なく実装できます。フォルダ構成がそのままレイアウト構造に対応するため、ディレクトリを見るだけでアプリ全体の画面設計を把握しやすくなる点も大きな特徴です。

子レイアウトとなるlayout.tsxでは、childrenを使って内側のページ内容を受け取り、専用のメニューや装飾を追加できます。ページ側のコードは非常にシンプルになり、表示したい内容だけを書けばよくなります。これにより、見た目の構造とページの中身を明確に分離でき、プログラムの読みやすさや理解しやすさが向上します。 Next.jsを使ったWebアプリケーション開発では、この考え方がとても重要です。

また、LayoutとTemplateの違いについても触れました。 Layoutはページ遷移をしても状態が維持されるため、共通UIやナビゲーションに向いています。一方でTemplateは、ページごとに作り直されるため、状態を引き継がせたくない場面で使われます。 Nested Layoutを使う場合は、基本的にLayoutを選ぶことで、安定したユーザー体験を提供できます。

Next.jsのNested Layoutを正しく理解すると、画面ごとの役割分担が明確になり、コードの整理整頓が自然とできるようになります。初心者の方でも、フォルダ構成とlayout.tsxの関係を意識しながら学ぶことで、実践的なレイアウト設計の力が身についていきます。今後ページ数が増えても破綻しにくい設計ができるようになるため、Next.jsでの開発を進める上でぜひ身につけておきたい知識です。


export default function SampleLayout({ children }) {
  return (
    <div>
      <header>共通エリア</header>
      <main>{children}</main>
      <footer>フッター</footer>
    </div>
  );
}

上記のようにLayoutを定義しておくことで、その配下のページはすべて同じ構造を共有します。さらにフォルダを分けてlayout.tsxを追加すれば、Nested Layoutとして特定エリア専用のデザインも簡単に実現できます。この仕組みを活用することで、Next.jsのレイアウト設計は格段に分かりやすくなります。

先生と生徒の振り返り会話

生徒

「Next.jsのNested Layoutって難しそうだと思っていましたが、フォルダ構成と一緒に考えると理解しやすいですね」

先生

「そうですね。フォルダとlayout.tsxの関係が分かれば、画面構造は自然と頭に入ってきます」

生徒

「共通レイアウトと専用レイアウトを分けられるので、ページごとの役割もはっきりします」

先生

「その通りです。Nested Layoutを使うことで、コードも整理されて後から見返したときに分かりやすくなります」

生徒

「これなら、ダッシュボードや管理画面が増えても安心して作れそうです」

先生