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.:
  JSCopy

  https://mockapihub.com/api/users

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!