[TIL] Next.js - Route Handlers

👉🏼 KIM·2024년 11월 24일

Route Handlers next.js

TIL

목록 보기

43/54

오늘 공부한것 & 기억하고 싶은 내용

Route Handlers

기존 next.js 버전에서는 API route를 만들어서 post, delete, get 등의 모든 요청을 보냈다.
하지만 최신버전(14)에는 이 방법 뿐만 아니라 더 편한 방법이 도입되었다.

HTTP Method를 처리하는 방법

어떨때는 GET 요청을 받을 것이고, 어떨 때는 POST 요청을 받을 것이다.
클라이언트: fetch로 데이터를 전송하고 서버의 응답을 받아 처리.
서버: API 라우트를 통해 데이터를 처리하고 응답.

클라이언트 코드 (onClick 함수)

클라이언트에서 fetch를 사용해 서버에 데이터를 보낸다.


const onClick = async () => {
  const response = await fetch("/www/users", {
    method: "POST", // POST 메서드를 통해 데이터를 보냄
    body: JSON.stringify({
      username: "yeah", // username과 password를 JSON 형식으로 보냄
      password: "1234",
    }),
  });
  console.log(await response.json()); // 서버에서 반환된 데이터를 JSON으로 출력
};

fetch: 클라이언트에서 HTTP 요청을 보낼 때 사용하는 함수.
method: "POST": POST 요청으로 데이터를 전송.
body: 서버로 보낼 데이터를 JSON 문자열로 변환하여 전송.
response.json(): 서버에서 받은 응답을 JSON 형식으로 변환.

서버 코드 (/www/users/route.ts)

Next.js에게 이 파일이 API route 라고 알려주는 파일명이다.
이 파일은 다른 page.tsx나 layout.tsx같이 렌더링을 해주는 파일이 아니다.
UI를 렌더링 하지 않는다!!
이 파일은 HTTP 요청을 받아서 json같은걸 반환하거나 사용자를 다른 어딘가로 이동시켜주는 역할을 한다.
꼭 /www/users/route.ts이 경로일 필요는 없지만 route.ts는 꼭 필요함 (www 대신 api도 괜찮음)

POST 요청 처리

export async function POST(request: NextRequest) {
  const data = await request.json(); // 클라이언트에서 보낸 JSON 데이터를 파싱
  console.log("log the user in!!!"); // 서버에서 로깅
  return Response.json(data); // 클라이언트에 데이터를 JSON으로 반환
}

NextRequest: Next.js에서 확장된 Request 객체로, 요청 정보에 접근할 수 있음.
request.json(): 요청 본문(JSON)을 파싱.
Response.json(data): 클라이언트에 JSON 형식의 응답을 반환.

GET 요청 처리

export async function GET(request: NextRequest) {
  console.log(request); // GET 요청 정보를 로깅
  return Response.json({
    ok: true, // JSON 형식으로 응답
  });
}

/www/users 경로로 GET 요청이 들어오면 ok: true를 반환
fetch를 사용해 method: "GET"로 요청 시 실행