1. Next.jsとは？はじめての人向け超かんたん説明

Next.js（ネクストジェイエス）は、WebサイトやWebアプリを作るための道具です。 Webサイトとは、インターネットで見るページのことです。たとえば、ブログ、会社のホームページ、ネットショップなどです。

Next.jsは、JavaScript（ジャバスクリプト）というプログラミング言語を使って作られています。プログラミング未経験の人でも、決まった書き方を覚えれば、少しずつ理解できるようになります。

特にNext.jsは、「ページの切り替えが速い」「画面の部品を使い回せる」などの特徴があり、最近とても人気があります。

2. LayoutとTemplateの違いを日常生活で例えると？

Layout（レイアウト）とTemplate（テンプレート）は、どちらもページの共通部分を作る仕組みです。しかし、動き方が違います。

Layoutは「家の骨組み」のようなものです。部屋を移動しても、柱や天井はそのまま残ります。そのため、Layoutの中の状態（後で説明するデータ）は、ページを移動しても保たれます。

一方でTemplateは「毎回新品の部屋」を用意するイメージです。別のページに移動すると、部屋が作り直されるため、中に置いてあったものはリセットされます。

3. 「状態（state）」とは何かを超やさしく解説

状態（state）とは、「今どうなっているか」という情報です。難しく聞こえますが、とても身近なものです。

たとえば、電気のスイッチが「オン」か「オフ」か。ゲームの体力が「100」なのか「50」なのか。これらはすべて状態です。

Next.jsでは、ボタンを押した回数や、入力された文字などを状態として覚えておくことができます。


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

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

  return (
    <div>
      <p>クリック回数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        ボタン
      </button>
    </div>
  );
}

（画面に「クリック回数：0」と表示され、ボタンを押すたびに数字が増えていきます）

4. Templateでページごとの状態をリセットする理由

Templateを使う最大の理由は、「ページを切り替えたときに、状態を最初からやり直したい」からです。

たとえば、入力フォームのページを考えてみてください。別のページに移動して戻ってきたとき、前に入力した文字が残っていたら困ることがあります。

Templateを使うと、ページを移動するたびにコンポーネント（画面の部品）が作り直されます。その結果、状態も最初の状態に戻ります。

5. Templateの基本的な書き方（Next.js App Router）

Next.jsでは、appフォルダの中にtemplate.tsxやtemplate.jsxを作ることでTemplateを使えます。ファイル名が決まっているので、名前を間違えないことが大切です。


export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
    </div>
  );
}

children（チルドレン）とは、「この中に表示されるページの中身」という意味です。難しい言葉ですが、「入れ物」だと思ってください。

6. Layoutだと状態が残る例を見てみよう

次はLayoutを使った例です。ページを移動しても、数字がそのまま残ります。


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

export default function Layout({ children }) {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <button onClick={() => setNumber(number + 1)}>
        数字：{number}
      </button>
      {children}
    </div>
  );
}

（ページを切り替えても、数字がリセットされずに残ります）

7. Templateだと状態がリセットされる例

同じようなコードでも、Templateにすると動きが変わります。


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

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

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>{text}</p>
      {children}
    </div>
  );
}

（別のページに移動すると、入力した文字が消えて最初の状態に戻ります）