[Next.js] Router Handlers

이크·2024년 8월 8일

nextjs

목록 보기

8/9

ROUTE HANDLER

Route Handler는 Request와 Response API를 이용하여 커스텀 요청을 생성해준다.

Route Handlers는 app directory에서만 사용 가능하다. pages directory에서는 API routes가 존재하기 때문에 API routes와 Route Handlers를 함께 사용할 필요가 없다.

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Route Handlers의 사용법은 method 형태가 다 비슷하다.
app directory의 하위 폴더에서 route.ts를 생성하여 route.ts에 각각의 custom request를 생성한다.

API를 사용하기 위해서 jsonplaceholder를 이용했다.

GET

// app/hello/route.ts
export async function GET() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  return Response.json(users);
}

localhost:3000/hello 로 GET 요청을 보내면 아래와 같이 데이터를 잘 가져온다.

Dynamic Route Handlers

📦hello
 ┣ 📂[id]
 ┃ ┗ 📜route.ts
 ┣ 📜page.tsx
 ┗ 📜route.ts

폴더 구조를 위와 같이 수정했다. id를 params로 받아서 특정 데이터를 가져온다.

// app/hello/[id]/route.ts
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post = await response.json();

  return Response.json(post);
}

POST

// app/hello/route.ts
export async function POST(request: Request) {
  const body = await request.json();
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

  const res = await response.json();

  return Response.json(res);
}

PATCH

PATCH도 POST와 마찬가지로 똑같이 작성할 수 있다.

// app/hello/[id]/route.ts
export async function PATCH(
  request: Request,
  { params }: { params: { id: string } }
) {
  const body = await request.json();
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    }
  );
  const res = await response.json();

  return Response.json(res);
}

DELETE

// app/hello/[id]/route.ts
export async function DELETE(
  request: Request,
  { params }: { params: { id: string } }
) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
    {
      method: "DELETE",
    }
  );
  const res = await response.json();

  return Response.json(res);
}

URL Query Parameters

쿼리 파라미터를 받아 Routes를 커스텀 할 수 있다. 쿼리 파라미터를 통해 원하는 데이터만 필터링 할 수 있다.

// app/hello/route.ts
import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const query = searchParams.get("query");

  console.log(query);

  return Response.json(query);
}

Headers & Cookies

Headers

HTTP Header는 API request와 response에 대한 메타데이터를 나타낸다.
요청에 대한 헤더를 가져올 수 있고 응답에 헤더를 추가할 수도 있다.

export async function GET(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);

  console.log(requestHeaders.get("Authorization"));

  return new Response("<h1>Header Test</h1>", {
    headers: {
      "Content-Type": "text/html",
      TEST: "test",
    },
  });
}

Cookies

export async function GET(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);

  console.log(requestHeaders.get("Authorization"));

  return new Response("<h1>Header Test</h1>", {
    headers: {
      "Content-Type": "text/html",
      "Set-Cookie": "age=20,name=jin",
    },
  });
}