[Next.js 15] - Part 9. Running a Mock JSON Server

Ace Lennox

03 Jan 20254 minutes to read

Setting Up JSON Server for Mock Data Fetching in Next.js v15

To dive into data fetching in Next.js v15, we'll start with a practical example. However, instead of introducing databases or complex setups at this stage, we'll use a lightweight and simple tool called JSON Server. It helps us simulate a REST API by serving data from a JSON file, making it perfect for learning without additional setup or knowledge requirements.

What Is JSON Server?

JSON Server is an open-source tool that lets you create a mock API with minimal effort. It reads a JSON file and exposes its data via a RESTful API. For example:

Data defined in the JSON file becomes accessible at endpoints like /posts or /posts/:id.
It allows rapid prototyping and learning without the complexity of a real backend.

We’ll use JSON Server to:

Simulate API responses.
Learn about caching, revalidation, and handling slow endpoints.

Step 1: Install JSON Server Locally

Instead of installing JSON Server globally, we'll install it as a development dependency for our project. This ensures it's only available locally for development purposes.

Open your terminal and navigate to your Next.js project root.
Run the following command:

npm install --save-dev json-server@0.17.4

Note: We’re installing version 0.17.4 explicitly because newer versions may introduce breaking changes, and this version supports features like delay simulation.

Verify the installation by checking your package.json. Under devDependencies, you should see:

"devDependencies": {
    "json-server": "0.17.4"
}

Step 2: Create a Mock Database File

In the root of your project, create a file named db.json.
Populate it with sample data. For example:

{
    "posts": [
        { "id": 1, "title": "Learn Next.js", "author": "Jane Doe" },
        { "id": 2, "title": "Understand Data Fetching", "author": "John Doe" }
    ]
}

Step 3: Configure a Custom NPM Script

To make it easier to start JSON Server, we’ll define a custom script in package.json:

Open package.json.
Add the following under "scripts":
```
"scripts": {
    "json-server": "json-server --watch db.json --port 3001"
}
```
- --watch: Watches the db.json file for changes.
- --port 3001: Starts the server on port 3001 (default port 3000 is reserved for the Next.js app).

Step 4: Run JSON Server

1. Start JSON Server by running:

npm run json-server

2. You’ll see output similar to:

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3001/posts

3. Visit http://localhost:3001/posts in your browser to confirm the server is running and serving data.

Step 5: Use the API in Next.js

You can now fetch this mock data in your Next.js application using any of the built-in data fetching methods like getServerSideProps, getStaticProps, or appRouter's fetch.

For example:

// pages/posts.js
export async function getServerSideProps() {
    const res = await fetch('http://localhost:3001/posts');
    const posts = await res.json();

    return {
        props: { posts },
    };
}

export default function PostsPage({ posts }) {
    return (
        <div>
            <h1>Posts</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>
                        <h2>{post.title}</h2>
                        <p>By: {post.author}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Next Steps

Now that you have JSON Server set up:

Experiment with slow endpoints by adding delays (use middleware).
Explore caching and revalidation strategies in Next.js.
Learn to handle errors and optimize user experience with streaming or loading states.

In upcoming lessons, we’ll cover each of these topics step by step to ensure you master data fetching in Next.js v15.

← [Next.js 15] - Part 8. How Data Fetching Works in Next.js

[Next.js 15] - Part 10. Actually Fetching Data with fetch inside a Server Component →

Latest Posts

View All