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.
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.
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.4explicitly 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"
}
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" }
]
}
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).
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.
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>
);
}
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.