지금부터는 Route Handlers의 다양한 사용 예시들을 살펴보도록 하겠습니다.

Cookie 다루기

Route Handlers에서는 next/headers 패키지의 cookies() 함수를 사용해서 Cookie를 읽거나 쓸 수 있습니다. 아래 코드는 token이라는 Cookie를 읽어온 이후, 응답에서 Set-Cookie 헤더를 사용하여 토큰 값을 클라이언트에 전송하는 코드입니다.

import { cookies } from 'next/headers';

export async function GET(request: Request) {
    const cookieStore = await cookies();
    const token = cookieStore.get('token');

    return new Response('Succeeded', {
        status: 200,
        headers: { 'Set-Cookie': `token=${token.value}` },
    });
}

NOTE. Set-Cookie 헤더란?
Set-Cookie 헤더는 서버가 클라이언트(브라우저)에게 쿠키를 설정하도록 지시하는 HTTP 응답 헤더입니다. 이렇게 클라이언트에 설정된 쿠키는 이후의 요청에서 조건에 따라 자동으로 포함되어 전송되며, 이를 통해 세션 유지나 사용자 인증 등의 기능을 수행할 수 있습니다.

Header 다루기

Route Handlers에서는 next/headers 패키지의 headers() 함수를 사용하여 요청 헤더의 값을 읽어올 수 있습니다. 참고로 헤더의 값은 읽기 전용이라는 점을 기억하기 바랍니다. 아래 코드는 referer라는 헤더 값을 읽어온 이후, 응답 헤더에 포함시켜서 전송하는 코드입니다.

import { headers } from 'next/headers';

export async function GET(request: Request) {
    const headersList = await headers();
    const referer = headersList.get('referer');

    return new Response('Succeeded', {
        status: 200,
        headers: { referer: referer },
    });
}

Dynamic Route Segments

이전 장에서 App Router의 Dynamic Routes를 배울 때 나왔던 것과 동일하게 Route Handlers에서도 Dynamic Segments를 사용할 수 있습니다. 아래 코드는 slug라는 이름의 Dynamic Segments를 사용하는 예시 코드입니다.

interface RequestPayload {
    params: Promise<{ slug: string }>;
}

export async function GET(request: Request, payload: RequestPayload) {
    const { params } = payload;
    const { slug } = await params;

    // ...
}

URL Query Parameters

Route Handlers에서는 요청에 포함된 쿼리 파라미터의 값을 읽어서 사용할 수 있습니다. 이 때 쿼리 파라미터를 읽어오는 등의 기능을 편하게 처리할 수 있도록 하기 위해서 Request를 확장한 NextRequest를 사용하면 됩니다. 아래 코드는 NextRequest를 사용해서 searchParams으로부터 offset과 limit라는 쿼리 파라미터의 값을 읽어오는 예시 코드입니다.

import { type NextRequest } from 'next/server';

export function GET(request: NextRequest) {
    const searchParams = request.nextUrl.searchParams;
    const offset = searchParams.get('offset');
    const limit = searchParams.get('limit');

    // ...
}

Request Body 데이터 읽기

Route Handlers에서는 아래 코드와 같이 표준 Web API 함수를 사용해서 Request body의 데이터를 읽어올 수 있습니다.

export async function POST(request: Request) {
    const data = await request.json();

    // ...
}

그리고 JSON이 아닌 FormData 형태로 전송된 데이터를 읽어올 때는 아래 코드와 같이 request.formData()함수를 사용하면 됩니다.

export async function POST(request: Request) {
    const formData = await request.formData();
    const title = formData.get('title');
    const content = formData.get('content');

    // ...
}

참고로 이렇게 Request Body로부터 데이터를 읽어오는 것은 주로 POST 요청에서 사용됩니다.