Next.jsでデータから一覧を生成する見本と仕組み解説

✅ サンプル：ネコ一覧を表示するページ

以下は、配列データを元に Tailwind CSS を使って一覧表示をする Next.js（App Router構成）の見本です。

📁 ファイル構成

app/
└── neko-list/
    └── page.tsx

📄 コード（app/neko-list/page.tsx）

'use client';

type Cat = {
  id: number;
  name: string;
};

const catData: Cat[] = [
  { id: 1, name: 'たま' },
  { id: 2, name: 'みけ' },
  { id: 3, name: 'しろ' },
];

export default function NekoListPage() {
  return (
    <main className="p-6 bg-gray-50 min-h-screen">
      <h1 className="text-2xl font-bold mb-4 text-blue-700">ネコ一覧</h1>

      <ul className="space-y-2">
        {catData.map((cat) => (
          <li key={cat.id} className="bg-white shadow p-4 rounded border border-gray-200">
            <span className="font-medium text-gray-800">ID: {cat.id}</span> / 名前: {cat.name}
          </li>
        ))}
      </ul>
    </main>
  );
}

📝 表示される内容（例）

🧠 質問：「どこが初期読み込み時のトリガーなの？」

次のコードのこの部分が、ページ表示時に自動で実行されるトリガーです。

export default function NekoListPage() {
  return (...);
}

🔍 仕組みの説明

Next.js（App Router構成）では、ページにアクセスすると、対応する page.tsx ファイル内の export default 関数が自動で実行され、返された JSX が画面に描画されます。

📈 処理の流れ

ユーザーが /neko-list にアクセスする
   ↓
Next.js が app/neko-list/page.tsx を読み込む
   ↓
export default された NekoListPage 関数を実行
   ↓
return 内のJSXを描画

💡 React的なポイント

✅ 応用例のアイデア