Next.js と React で使うモックAPI：ステップバイステップ入門

フロントエンドを作っていると、バックエンド API の待ちで足が止まることがあります。そこで役立つのが モック API。実サーバーに依存せず、実装・テスト・プロトタイピングを進められます。

このチュートリアルでは、Next.js／React プロジェクトにモック API を統合する手順を、MockApiHubを使って紹介します。

なぜ Next.js でモック API を使うのか？

🚀 バックエンド待ち不要：UI コーディングを即開始できる
🧪 一貫したテストデータ：不安定なステージングに依存しない
⚡ 高速プロトタイピング：動くデモをすぐに共有できる

Step 1: Next.js プロジェクトの作成

BASH

npx create-next-app@latest mockapi-demo
cd mockapi-demo
pnpm dev

Step 2: MockApiHub でモック API を取得

MockApiHub Playground にアクセス
例として「/users」などのエンドポイントを選ぶ
例の URL をコピー：
JS
```
https://mockapihub.com/api/users
```

Step 3: React コンポーネントでデータ取得

TSX

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

type User = {
id: number;
name: string;
email: string;
};

export default function Users() {
const [users, setUsers] = useState<User[]>([]);

useEffect(() => {
fetch("https://mockapihub.com/api/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);

return (
<div>
<h1 className="text-2xl font-bold">User List</h1>
<ul>
{users.map((u) => (
<li key={u.id}>
{u.name} — <span className="text-gray-600">{u.email}</span>
</li>
))}
</ul>
</div>
);
}

Step 4: Next.js のページで表示

TSX

import Users from "@/components/Users";

export default function Home() {
return (
  <main className="p-6">
    <h1 className="text-3xl font-bold mb-4">
      Next.js + Mock API Example
    </h1>
    <Users />
  </main>
);
}

これで、モック API からデータを取得して表示する Next.js アプリが完成です 🎉

Step 5: プロトタイピングを拡張する

複数エンドポイント（例：/products、/orders）を追加
テーブルやダッシュボード、チャートをモックデータで先に構築
後で本番 API へ差し替え可能（fetch の呼び出しはそのまま）

まとめ

モック API は開発者の強力な相棒です。MockApiHub を使えば、エンドポイントを即生成して React や Next.js に組み込み、バックエンド待ちなしでどんどん開発を進められます。

👉 まずは MockApiHub Playground で試してみましょう！