Next.js：テキストボックス＋ボタンの動作サンプル解説

以下は、Next.js（App Router構成）とTailwind CSSを使って「テキストを入力 → ボタンを押して表示」するシンプルなUIを構成したコードです。

📄 コンポーネントコード

'use client'; // ← イベント処理を使うので必須

import { useState } from 'react';

export default function NekoInputPage() {
  const [inputValue, setInputValue] = useState('');
  const [output, setOutput] = useState('');

  const handleClick = () => {
    setOutput(inputValue);
  };

  return (
    <main className="min-h-screen flex flex-col items-center justify-center bg-blue-50 p-6">
      <h1 className="text-3xl font-bold text-blue-700 mb-6">テキスト入力デモ</h1>

      <input
        type="text"
        className="border border-gray-300 rounded p-2 w-64 mb-4 text-black"
        placeholder="名前を入力してください"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />

      <button
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        onClick={handleClick}
      >
        表示する
      </button>

      <div className="mt-6 text-xl text-blue-800">
        {output && <>こんにちは、<strong>{output}</strong> さん！</>}
      </div>
    </main>
  );
}

🧠 各部の解説

1. 'use client' とは？

Next.js（App Router）では、状態管理やイベント（onClickなど）を使いたい場合、この宣言で「このコンポーネントはブラウザ側で動かす」と指定する必要があります。

2. useStateの利用

const [inputValue, setInputValue] = useState('');
const [output, setOutput] = useState('');

3. イベント処理：handleClick

const handleClick = () => {
  setOutput(inputValue);
};

ボタンがクリックされたとき、入力値を出力用の状態にセットします。

4. JSX構成

📊 状態の流れ（イメージ）

[入力欄] → (onChange) → inputValue（状態） 
            ↓
       [ボタンを押す]
            ↓
        output に反映
            ↓
     [出力エリアに表示]

🎨 Tailwindのスタイルまとめ

クラス名意味
text-blackテキストの色を黒に
bg-blue-50背景を薄い青に
rounded角を丸く
hover:bg-blue-700ボタンにホバー時の色を追加

📌 応用例（発展編）