Generate Test Data for Next.js Applications

The Problem

Next.js apps need data at every layer: Server Components fetching from a database, API routes returning JSON, and client components rendering lists. During development, you either hardcode arrays of fake objects or spin up an entire backend just to see your UI with more than two rows of data.

This slows down frontend development and makes it impossible to test edge cases like empty states, long text, or paginated data without manual effort.

The Solution: MockHero API

MockHero generates realistic data via a simple POST request. Call it from a Server Component, a seed script, or an API route. With 156+ field types and relational ref fields, you get data that mirrors your production schema.

Quick Setup

curl -X POST https://api.mockhero.dev/api/v1/generate \
  -H "x-api-key: mh_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
  "tables": [
    {
      "name": "products",
      "count": 20,
      "fields": [
        { "name": "id", "type": "uuid" },
        { "name": "name", "type": "product_name" },
        { "name": "price", "type": "decimal", "params": { "min": 10, "max": 200 } },
        { "name": "image", "type": "image_url" },
        { "name": "description", "type": "sentence" }
      ]
    }
  ],
  "format": "json"
}'

Step-by-Step Guide

1. Install dependencies

No extra packages needed. Next.js has built-in fetch support in both Server and Client Components.

2. Get your MockHero API key

Sign up at mockhero.dev/sign-up. Store the key in .env.local:

MOCKHERO_API_KEY=mh_your_api_key

3. Create a data-fetching utility

Create lib/mock-data.ts:

export async function generateMockData(schema: object) {
  const res = await fetch("https://api.mockhero.dev/api/v1/generate", {
    method: "POST",
    headers: {
      "x-api-key": process.env.MOCKHERO_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ ...schema, format: "json" }),
  });
  const json = await res.json();
  return json.data;
}

4. Use in a Server Component

Call generateMockData() directly in your async page component and render the products.

5. Use in a seed script

For persistent data, create a seed script that writes MockHero data to your database (see our Prisma or Drizzle guides).

6. Verify

Run npm run dev and navigate to your products page. You should see realistic product cards.

Complete Example

The utility function and Server Component above form a complete working example. For production apps, use MockHero to seed your database once, then read from the database normally.

Why MockHero vs Faker / Manual Seeds

• Server Component friendly — call the API directly from async components, no client-side JS.
• No build step — no installing Faker, no importing modules, just an HTTP call.
• Relational data — use ref fields to generate linked tables for complex UIs.

Get Started

Free tier, 1,000 rows/month, no credit card. Sign up at mockhero.dev and fill your Next.js app with real data.