Stop waiting for the backend to prototype your Next.js app. Rest Faker gives you a hosted REST API with realistic data you can fetch in Server Components, Client Components, or Route Handlers — no backend required.
Importing JSON files works for one component. It breaks down the moment you need pagination, sorting, mutations, or server-side data.
Local json-server doesn't work in GitHub Actions, Vercel previews, or Storybook Cloud — your preview links show broken API calls.
Next.js Server Components fetch over the network, not from process memory. You need a real HTTP endpoint, not a local in-memory mock.
Works exactly like any real REST API — no adapter, no wrapper.
Server Component (app/users/page.tsx)
const BASE = "https://api.restfaker.dev/api/schema";
const TOKEN = process.env.RESTFAKER_TOKEN; // store in .env.local
// This is an async Server Component — no useEffect needed
export default async function UsersPage() {
const res = await fetch(`${BASE}/users?perPage=20`, {
headers: { apiToken: TOKEN },
next: { revalidate: 60 }, // ISR: revalidate every 60s
});
const { data: users } = await res.json();
return (
<main>
<h1>Users</h1>
<ul>
{users.map((u) => (
<li key={u.id}>{u.name} — {u.email}</li>
))}
</ul>
</main>
);
}Client Component with SWR
"use client";
import useSWR from "swr";
const BASE = "https://api.restfaker.dev/api/schema";
const TOKEN = "YOUR_API_TOKEN";
const fetcher = (url) =>
fetch(url, { headers: { apiToken: TOKEN } }).then(r => r.json());
export function ProductList({ page = 1 }) {
const { data, isLoading } = useSWR(
`${BASE}/products?page=${page}&perPage=10`,
fetcher,
);
if (isLoading) return <p>Loading...</p>;
return (
<ul>
{data?.data.map((p) => (
<li key={p.id}>{p.name} — {p.price{"}"}</li>
))}
</ul>
);
}Route Handler proxy (app/api/users/route.ts)
import { NextResponse } from "next/server";
const BASE = "https://api.restfaker.dev/api/schema";
// Keep your API token server-side by proxying through a Route Handler
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const res = await fetch(
`${BASE}/users?${searchParams}`,
{ headers: { apiToken: process.env.RESTFAKER_TOKEN! } },
);
const data = await res.json();
return NextResponse.json(data);
}Fetch directly in async Server Components — no useEffect, no loading state, just data.
Works with Next.js 13+ App Router conventions including layouts, loading.tsx, and error.tsx.
Use a Next.js Route Handler to proxy Rest Faker — keep your API token server-side.
Download TypeScript interfaces generated from your schema for type-safe fetching.
The mock API is live at a public URL — preview deployments work without any extra config.
Simulate network errors, slow API responses, and rate limits to test your error.tsx.
Works in Server Components — async fetch over a real network URL
Works in Vercel previews — no localhost dependencies
Supports ISR — use next: { revalidate } with any endpoint
Mutations persist — POST and PATCH update the stored data
Proxy via Route Handler to keep tokens server-side
Scenario engine — test your error.tsx and loading.tsx with real errors
Free to start. Works in Server Components, Client Components, and Route Handlers.
Related use cases