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

生徒

「Next.jsでダッシュボード画面を作るときに、同じメニューやヘッダーを毎回書かないといけないんですか？」

先生

「Next.jsにはLayoutという仕組みがあり、共通部分をまとめて管理できます。」

生徒

「Layoutを使うと、どんなメリットがあるんですか？」

先生

「画面の構造を整理できて、ダッシュボードなどの管理画面がとても作りやすくなります。それでは、詳しく見ていきましょう。」

1. Next.jsのLayout設計とは何か

Next.jsのLayout設計とは、複数のページで共通して表示する部分をまとめて管理する仕組みです。例えば管理画面やダッシュボードでは、画面の上にヘッダーがあり、左側にメニューがあり、中央に内容が表示される構造がよく使われます。このような共通の構造を毎回ページごとに作成すると、修正が必要になったときにすべてのページを書き直す必要が出てしまいます。

Layoutは建物の骨組みのような役割を持っています。建物を作るときに、毎回柱や壁を作り直すことはありません。最初に骨組みを作り、その中に部屋を配置します。Next.jsでも同じ考え方で、画面の土台となる部分をLayoutとして定義し、その中に各ページを配置していきます。

この仕組みを利用することで、画面構成を整理でき、コードの管理が簡単になります。また、表示デザインの統一ができるため、操作しやすい画面を作成できます。

2. ダッシュボード構造でLayoutが必要になる理由

ダッシュボードとは、情報をまとめて確認できる画面のことです。例えば会員管理画面、売上管理画面、商品管理画面などがあります。これらの画面では、多くの場合、同じナビゲーションメニューやタイトル部分が存在します。

もしLayoutを使用しない場合、すべてのページに同じヘッダーやメニューを書く必要があります。この状態では、メニューを追加したときに、すべてのページを修正しなければならなくなります。作業量が増えるだけでなく、修正漏れが発生する可能性も高くなります。

Layoutを使用すると、共通部分は一箇所だけ修正すればよくなります。これは作業効率を大きく改善し、保守性という将来の修正のしやすさも向上させます。保守性とは、プログラムを長く安全に使うための大切な考え方です。

3. 基本的なLayoutファイルの作成方法

Next.jsでは、appフォルダの中にlayoutファイルを作成することで共通レイアウトを定義できます。このファイルの中で、ページ全体の構造を決めることができます。

childrenという仕組みを使用すると、Layoutの中に各ページの内容を表示できます。childrenとは、親となる部品の中に入る子供のような内容を意味します。


export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <header>ダッシュボードヘッダー</header>
      <main>{children}</main>
    </div>
  );
}

ダッシュボードの全ページにヘッダーが表示され、その下に各ページの内容が表示されます。

このようにchildrenを配置することで、ページごとの内容を差し替えることができます。初心者の方は、共通枠の中にページが入る箱を用意していると考えると理解しやすくなります。

4. サイドメニュー付きダッシュボードLayoutの設計

多くのダッシュボードでは、左側にメニューを表示します。この構造をLayoutで定義すると、すべてのページで同じメニューを表示できます。


export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div style={{ display: "flex" }}>
      <nav style={{ width: "200px" }}>
        <ul>
          <li>ホーム</li>
          <li>ユーザー管理</li>
          <li>設定</li>
        </ul>
      </nav>
      <main style={{ padding: "20px" }}>
        {children}
      </main>
    </div>
  );
}

画面の左側にメニューが表示され、右側にページ内容が表示されます。

この構造を使うと、管理画面らしい画面配置を簡単に作成できます。画面の分割は、机の上に仕切りを置いて作業スペースを分けるようなイメージで理解できます。

5. Templateとの違いと使い分け

Next.jsにはLayoutと似た仕組みとしてTemplateがあります。Layoutは一度読み込まれると、ページ移動しても再利用されます。一方Templateは、ページ移動するたびに新しく読み込まれます。

例えばログイン情報や一時的な画面状態を毎回初期化したい場合にはTemplateを使用します。逆にメニューやヘッダーのように、常に表示して再利用したい部分はLayoutを使用します。


export default function Template({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <p>Templateが読み込まれました</p>
      {children}
    </div>
  );
}

ページ移動するたびにTemplateの内容が再表示されます。

この違いを理解すると、表示処理を効率的に設計できるようになります。

6. フォルダ構成とダッシュボードLayoutの関係

Next.jsではフォルダ構成がそのまま画面構造になります。ダッシュボード専用のLayoutを作成する場合は、dashboardフォルダ内にlayoutファイルを配置します。


app
 ├ dashboard
 │   ├ layout.tsx
 │   ├ page.tsx
 │   └ users
 │       └ page.tsx

dashboardフォルダ内のページすべてに同じLayoutが適用されます。

この仕組みを使うと、管理画面だけ特別なレイアウトを適用できます。これは建物の階ごとに内装を変えるような考え方に近いです。

7. 複数Layoutを組み合わせる設計方法

Next.jsではLayoutを入れ子構造で使用できます。入れ子とは、箱の中にさらに箱を入れるような構造です。これにより、共通Layoutの上に、さらに細かいLayoutを追加できます。


export default function UsersLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      <h2>ユーザー管理</h2>
      {children}
    </section>
  );
}

ユーザー管理ページのみ専用タイトルが表示されます。

この方法を利用すると、画面の種類ごとに表示を整理できます。大きな共通構造の中に、小さな共通構造を重ねることで、効率的な画面設計が可能になります。

8. Layout設計で意識する画面設計の基本

Layout設計では、どの部分が共通で、どの部分がページごとに変わるのかを明確にすることが重要です。共通部分を正しく分離できると、コード量を減らすことができ、作業ミスも防げます。

また、画面の役割を整理して設計することで、利用者にとって操作しやすい画面になります。画面の見た目だけではなく、情報の配置や操作の流れも意識することが大切です。

ダッシュボードでは、ナビゲーション、内容表示、操作パネルなどを分けて考えると設計しやすくなります。Layoutは画面構造を管理する中心的な役割を持つため、最初に設計を整理してから作成することが重要です。

まとめ

（振り返りのまとめ）

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