Fetching data from App Router client component in Nextjs

App Router is a new feature of Next.js since Next.js 13. It works within the app directory of the application. However, compared to Page Router, Nextjs documentation is lacking sufficient illustrations. For example, in server component of App Router, you can directly call fetch to fetch data from api. But when it comes to fetching data in client component, the documentation just claiming that you need to call a Route Handler from a client component, and the other doc does not actually contain any such example.

There are two ways to fetch data on a client component in App Router. The most easiet one is to use a third-party library such as SWR. However, in this article, we will give you a short tutorial on how to fetch data on a client component using Route Handler.

First, create a new folder api in the app directory. Then depending on your requirement, you can also create a folder login in api. Next, to complete creating a Route Handler, create a new file route.js|ts in the login directory. Then your folder structure will like the following:

\app
   \api
      \login
          route.js|ts

Now, add the following to your route.js|ts:

export async function GET() {
    const res = await fetch('https://www.example.com/api/...', {
      headers: {
        'Content-Type': 'application/json',
      },
    })
    const data = await res.json()
   
    return Response.json({ data })
}

Finally, call the Route Handler you defined in a client component as follows:

"use client";

export default function Page({ children }: { children: any }) {
  fetch('/api/login')
  .then((res)=>
    res.json()
  )
  .then((data)=>{
    console.log(data)
  })
}

You can see that creating a Route Handler is indeed creating a new route and URL in your application. Then to use the Route Handler to fetch data, you just need to call the URL you defined. In other words, calling a Route Handler means calling its URL.