Let me guess — you just started learning Next.js, and now you're stuck at one of the most basic yet oddly overwhelming tasks:

How do I fetch data from an API or a JSON file in Next.js?

Trust me, I’ve been there. When I first started with Next.js, this whole concept of data fetching — especially the difference between server-side and client-side — seemed like rocket science. But here's the good news:

It’s super simple once you understand the flow.

This blog is especially for beginners who want to understand how to fetch JSON/API in Next.js in the simplest possible way. I’ll break it down into two parts — server-side and client-side fetching — with working code examples. Let’s get started 👇

Step 1: Create a Fetch File (Reusable)

The very first step is to write the logic to fetch the API or JSON. I usually like to keep things clean and reusable — so I create a separate file for fetching. Also, you can create the file anywhere inside app or in root directory but my suggestion is create a new folder in root and then create file in it. Keep it isolated from other components. Here’s what the file looks like:

// lib/fetchData.js

export async function fetchData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  const data = await res.json();
  return data;
}

What’s happening here?

We use fetch to call the API.

Then we convert the response to JSON.

We use async/await to make it clean and readable.

This function can now be imported and used anywhere.

Step 2: Fetch Data in a Component

Server Component: In Next.js (especially in the App Router), server components allow you to use async/await directly — no need for hooks. Here’s a working example:

// app/server-example/page.jsx
import { fetchData } from '@/lib/fetchData';

export default async function ServerExample() {
  const posts = await fetchData();

  return (
    <div>
      <h1>Server Component</h1>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Highlights:

This works only because it's a server component.

You can use await directly.

No need for useEffect.

Client Component: Client components don’t allow async directly at the top level. So, we handle it with useEffect and useState. Here’s the code:

// app/client-example/page.jsx
'use client';

import { useEffect, useState } from 'react';
import { fetchData } from '@/lib/fetchData';

export default function ClientExample() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function getPosts() {
      const data = await fetchData();
      setPosts(data);
    }

    getPosts();
  }, []);

  return (
    <div>
      <h1>Client Component</h1>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Why the difference?

In client components, we use useEffect to fetch data after the component mounts.

We also use useState to store and display the fetched data.

Next.js is incredibly powerful once you get the hang of it. And fetching data — whether from an API or a JSON file — is no longer a mystery. Just remember:

Use async/await in server components.

Use useEffect + useState in client components.

Keep your fetch logic clean and reusable.

You don’t need to overthink it. Start simple, and build your confidence step by step.

How to Fetch JSON or API in Next.js: Beginner's Guide