1. Next.js Client Componentsとは何か？

Next.jsには、Server ComponentsとClient Componentsという考え方があります。Client Componentsは、ブラウザ上で動く部品です。

たとえば、文字を入力する、ボタンを押す、チェックを入れるといった操作は、すべてClient Componentsが担当します。パソコンで言うと、キーボードやマウスの動きにすぐ反応する部分です。

Client Componentsを使うときは、ファイルの一番上に「use client」と書きます。これは「この部品はブラウザで動かします」という合図です。

2. フォーム入力にClient Componentsが必要な理由

フォーム入力とは、名前やメールアドレスを入力する画面のことです。入力した瞬間に画面が変わったり、エラーを表示したりするには、即時反応が必要です。

このような即時反応は、Client Componentsでしか実現できません。Server Componentsは画面を表示するのは得意ですが、入力のたびに動く処理は苦手です。

そのため、Next.jsでフォームを作るときは、Client Componentsを使うのが基本になります。

3. useStateを使った基本のフォーム入力

まずは、一番シンプルなフォーム入力です。useStateは、入力された値を覚えておくための仕組みです。


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

export default function FormSample() {
  const [name, setName] = useState("");

  return (
    <div>
      <p>名前を入力してください</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>入力内容：{name}</p>
    </div>
  );
}

（文字を入力すると、すぐ下に入力した内容が表示されます）

4. 送信ボタンを使ったフォーム処理

次は、ボタンを押してから処理を行うパターンです。これは「入力して、最後に決定する」流れになります。


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

export default function SubmitForm() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = () => {
    setMessage("送信されました：" + email);
  };

  return (
    <div>
      <input
        type="email"
        placeholder="メールアドレス"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleSubmit}>送信</button>
      <p>{message}</p>
    </div>
  );
}

（メールアドレスを入力して送信ボタンを押すと、送信メッセージが表示されます）

5. チェックボックスを扱うフォーム例

フォームでは、チェックボックスもよく使われます。これは「はい・いいえ」を選ぶ仕組みです。


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

export default function CheckForm() {
  const [agree, setAgree] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={agree}
          onChange={(e) => setAgree(e.target.checked)}
        />
        利用規約に同意する
      </label>
      <p>{agree ? "同意しています" : "同意していません"}</p>
    </div>
  );
}

（チェックを入れると「同意しています」と表示されます）

6. 複数の入力項目をまとめて扱う方法

実際のフォームでは、名前や年齢など複数の入力欄があります。その場合は、まとめて管理すると便利です。


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

export default function MultiForm() {
  const [form, setForm] = useState({ name: "", age: "" });

  return (
    <div>
      <input
        placeholder="名前"
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        placeholder="年齢"
        value={form.age}
        onChange={(e) => setForm({ ...form, age: e.target.value })}
      />
      <p>{form.name}さん（{form.age}歳）</p>
    </div>
  );
}

（名前と年齢を入力すると、まとめて表示されます）