Mock APIs in Next.js and React: A Step-by-Step Tutorial

When you’re building a frontend, waiting for backend APIs can slow you down. That’s where mock APIs come in — they let you develop, test, and prototype without relying on real servers.

In this tutorial, we’ll walk through how to integrate a mock API into a Next.js / React project, using MockApiHub.

---

Why Use a Mock API in Next.js?

• 🚀 Develop without backend: Start coding UIs immediately.
• 🧪 Consistent test data: No flaky staging servers.
• ⚡ Fast prototyping: Show clients working demos quickly.

---

Step 1: Create a Next.js Project

curl "npx create-next-app mockapi-demo
  cd mockapi-demo
  pnpm dev

Step 2: Get a Mock API from MockApiHub

• Go to MockApiHub Playground.
• Generate a mock endpoint (e.g., /users).
• Copy the URL, e.g.:

https://mockapihub.com/api/users

tsx

Step 3: Fetch Data in a React Component

"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: Display in Next.js Page

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>
  );
}

Now you have a working Next.js app pulling data from a mock API 🎉

Step 5: Extend for Prototyping

• Add multiple endpoints (e.g., /products, /orders).
• Use mock data to build dashboards, tables, and charts.
• Replace mock API with real backend later — same fetch code works.

Conclusion

Mock APIs are a developer’s superpower. With MockApiHub, you can generate endpoints instantly, plug them into React or Next.js, and keep shipping without waiting on backend work.

👉 Ready to try it yourself? Head over to the MockApiHub Playground
and start mocking today!

---

📬 Found this useful? Subscribe to free weekly mock-API tips — short emails with real techniques, AI testing patterns, and integration recipes. No spam, unsubscribe anytime.