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

生徒

「Next.jsの記事で、LayoutとTemplateって言葉を見たんですが、何が違うのかわかりません…」

先生

「どちらも画面の共通部分を作る仕組みですが、画面が切り替わったときの動きが違います。」

生徒

「画面の動き…？パソコンを触ったことがなくても理解できますか？」

先生

「大丈夫です。身近な例えを使って、最初からゆっくり説明します。」

1. Next.jsとは？まずは超基本から理解しよう

Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための仕組みです。 Webサイトとは、インターネットで見る画面のことです。文字や画像、ボタンが表示されるページを作れます。

Next.jsはJavaScript（ジャバスクリプト）というプログラミング言語を使います。プログラミング言語とは、パソコンに「こう動いてください」と伝えるための言葉です。難しそうに聞こえますが、Next.jsは初心者でも画面を作りやすいように工夫されています。

2. Layoutとは？画面の「共通の枠」を作る仕組み

Layout（レイアウト）とは、どのページでも共通して表示したい部分をまとめる仕組みです。例えば、ノートの上にあるタイトル欄や、すべてのページにあるヘッダーメニューを想像してください。

Next.jsのLayoutを使うと、「画面の上にロゴ」「下にフッター」といった共通部分を一度だけ書けば済みます。ページを移動しても、その部分はそのまま残り続けます。


export default function Layout({ children }) {
  return (
    <div>
      <header>ヘッダーです</header>
      <main>{children}</main>
      <footer>フッターです</footer>
    </div>
  );
}

どのページを開いても、上に「ヘッダーです」、下に「フッターです」が表示されます。

3. Templateとは？ページごとに作り直される枠

Template（テンプレート）もLayoutと同じく、画面の共通部分を作る仕組みです。ただし、大きな違いがあります。それは「ページを移動するたびに、毎回作り直される」という点です。

例えるなら、Layoutは「ずっと同じ机」、Templateは「ページごとに新しい紙を敷く机」です。見た目は同じでも、中身は毎回新しくなります。


export default function Template({ children }) {
  return (
    <div>
      <h2>テンプレートのタイトル</h2>
      {children}
    </div>
  );
}

ページを移動するたびに、このテンプレートは最初から読み直されます。

4. LayoutとTemplateの決定的な違い

LayoutとTemplateの一番大きな違いは、「状態が残るかどうか」です。状態とは、ボタンを押した回数や、入力した文字などの記憶のことです。

Layoutはページが切り替わっても状態を保ちます。 Templateはページが変わると、状態がリセットされます。


"use client";
import { useState } from "react";

export default function LayoutExample({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        クリック回数: {count}
      </button>
      {children}
    </div>
  );
}

ページを移動しても、クリック回数はそのまま残ります。

5. Templateが向いているケースとは？

Templateは、ページを移動するたびに初期状態に戻したい場合に使います。例えば、入力フォームや確認画面などです。

毎回まっさらな状態から始めたい画面では、Templateを使うと安心です。前のページの影響を受けないため、予期しない動きを防げます。


"use client";
import { useState } from "react";

export default function TemplateExample({ children }) {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="文字を入力"
      />
      {children}
    </div>
  );
}

ページを移動すると、入力した文字は消えて最初の状態に戻ります。