Next.js Data Fetching, Part 4: Custom Fetches and Route Handlers

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This part covers practical fetch customization:

adding headers

sending cookies

, and

invalidating and customizing caches

We will then look at using Next.js route handlers to make the application act as an API server.

Customizing fetch: Headers and cookies 🔗

The fetch function works much as it does in the browser, but using it in a server component lets you take advantage of the server environment.

For example, you can

add headers

include cookies

in a request.

Example: Adding headers 🔗

const res = await fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer my-token',
  },
});

This lets you send required headers such as authentication tokens or user information.

Forwarding cookies with the cookies() API 🔗

Server components can access client cookies through Next.js's built-in cookies() API.

For example, retrieve a signed-in user's information from a cookie and forward it with a request.

import { cookies } from 'next/headers';
 
const cookieStore = cookies();
const token = cookieStore.get('token');
const res = await fetch('https://api.example.com/user', {
  headers: {
    Authorization: `Bearer ${token?.value}`,
  },
});

This is useful for handling a user's authentication information securely on the server.

Cache invalidation: A tag-based strategy 🔗

Next.js lets you assign

Example: Adding a tag 🔗

await fetch('https://api.example.com/data', {
  next: {
    tags: ['data'],
  },
});

Later, call revalidateTag('data') to invalidate that cache.

Invalidation example in a server action 🔗

'use server';
import { revalidateTag } from 'next/cache';
export async function updateSomething() {
  // 데이터 수정 로직
  await revalidateTag('data'); // 'data' 태그에 해당하는 fetch 캐시 무효화
}

When a user changes data, this lets you refetch precisely the requests associated with that data.

Building an API with route handlers 🔗

Next.js can act as its own API server by defining

route handlers

inside app/api/.

For example, create an API that retrieves user information as follows.

// app/api/user/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await res.json();
    return NextResponse.json(user);
}

A request to /api/user will now receive JSON data from the API.

Route handlers can implement individual functions for methods such as GET, POST, PUT, and DELETE, and can work usefully alongside server actions.

Conclusion 🔗

We have learned to customize Next.js fetch requests and use cache invalidation to manage data flexibly.

We also saw how route handlers enable an API structure that brings frontend and backend together.

The next part

brings everything together

and compares which strategies work best in different situations.

Further questions 🔗

How would you separate caches for different users' data?
How could you implement automatic retries or fallbacks when an API request fails?

References 🔗

Next.js Data Fetching, Part 4: Custom Fetches and Route Handlers | PromleeBlog