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

Next.jsのLayoutとTemplateは、ページの共通部分をまとめるための仕組みです。共通部分とは、どのページでも同じように表示されるヘッダーやフッター、メニューなどを指します。初心者の方は「毎回同じHTMLを書くのを省くための箱」と考えると分かりやすいです。 LayoutとTemplateは見た目が似ていますが、画面が切り替わったときの動き方が違います。この違いを理解することが、Next.jsを正しく使う第一歩になります。

2. Layoutの基本的な役割と特徴

Layoutは、ページが切り替わっても状態を保ち続ける共通レイアウトです。例えば、サイト全体のヘッダーやサイドメニューのように、ページが変わっても消えてほしくない部分に向いています。現実世界で例えると、家の「柱」や「土台」のような存在です。部屋が変わっても、柱や土台は変わらないイメージです。


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

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

3. Templateの基本的な役割と特徴

Templateは、ページが切り替わるたびに新しく作り直される共通構造です。同じ見た目でも、毎回リセットしたい場合に使います。例えるなら、ノートの「下書き用テンプレート」のようなものです。新しいページに移動するたびに、まっさらな状態から始まります。フォーム画面や一時的な表示に向いています。


export default function Template({ children }) {
  return (
    <div className="template-area">
      {children}
    </div>
  );
}

ページを移動すると、Template内の状態は毎回リセットされます。

4. LayoutとTemplateの動きの違い

LayoutとTemplateの最大の違いは「状態が残るかどうか」です。 Layoutは、ページを移動しても内部の状態を保ちます。一方でTemplateは、ページが変わるたびに作り直されます。初心者の方は「残したいならLayout、毎回やり直したいならTemplate」と覚えると失敗しにくくなります。この考え方を知らないと、入力内容が突然消えたように感じて混乱します。

5. Layoutが向いている具体的なケース

Layoutは、サイト全体で共通して使う部分に向いています。例えば、ログイン状態を表示するヘッダーや、常に表示したいナビゲーションです。画面が切り替わっても同じ情報を見せたい場合に使います。これにより、ユーザーは今どこにいるか迷わずに操作できます。


function SidebarLayout({ children }) {
  return (
    <div>
      <aside>メニュー</aside>
      <main>{children}</main>
    </div>
  );
}

export default SidebarLayout;

ページを移動しても、左側のメニューはそのまま表示され続けます。

6. Templateが向いている具体的なケース

Templateは、ページごとに状態を初期化したい場合に便利です。入力フォームや確認画面など、前のページの影響を残したくない場面で使います。毎回同じ形だけを使い、中身は新しくしたいときに役立ちます。間違ってLayoutを使うと、前の入力が残ってしまうことがあります。


export default function FormTemplate({ children }) {
  return (
    <section>
      <h2>入力フォーム</h2>
      {children}
    </section>
  );
}

ページを開くたびに、フォームは初期状態から表示されます。

7. 初心者が迷いやすい使い分けの考え方

初心者の方は「共通だから全部Layoutでいい」と考えがちです。しかし、画面遷移時の動きまで考えることが大切です。状態を保持したいか、毎回初期化したいかを基準に考えましょう。迷ったときは、ページ移動後に何が残っていてほしいかを想像すると判断しやすくなります。この考え方を身につけると、Next.jsの画面設計が一気に楽になります。