[Next.js] Route Handlers

Route Handlers

Next.js 13부터는 app 디렉토리에서 API 엔드포인트를 직접 정의할 수 있는 Route Handlers 기능이 추가되었다. 별도의 api 폴더를 사용하지 않고도 서버 측의 기능을 구현할 수 있다. Route Handlers는 웹 개발에서 동적인 사용자 경험을 제공하기 위한 서버 측 로직이 요구될 때 쓰일 수 있다. 사용자가 입력한 내용을 검증, 처리하는 API, 데이터 조회와 수정 등 서버 측에서 작업을 수행할 때 장점을 갖는다.

• 컴포넌트와 API 라우트를 같은 위치에 배치하여 유지 보수성을 높일 수 있다.
• Next.js의 서버 사이드 기능을 쉽게 구현할 수 있다.

 

 

Route Handlers의 위치

 

Route handler 파일은 app 디렉토리 아래, 라우트 이름에 해당하는 폴더 안에 route.js 또는 route.ts 파일로 생성한다.

app/
  api/
    posts/
      route.ts

 

 

HTTP 메서드 사용

 

Route Hnadlers에서는 기존에 사용하던 GET, POST, PUT, DELETE 등의 HTTP 메서드를 모두 지원한다. 이때 각 메서드를 파일 내에서 함수로 내보내서 정의하면 된다. request 객체는 헤더, 본문, URL 파라미터 등 요청 데이터를 제공하고, Response 클래스는 응답 데이터를 구성하고 반환하는 데 쓰인다.

export async function GET(request) {
  return new Response(JSON.stringify({ message: "Hello, world!" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

 

 

사용되는 메서드의 역할은 기존의 HTTP 메서드와 같다.

• GET: 데이터를 조회
• POST: 새로운 데이터를 생성
• PUT: 기존 데이터를 수정
• DELETE: 데이터를 삭제
• PATCH: 데이터의 일부를 업데이트
• OPTIONS: 서버가 지원하는 메서드를 확인

 

NextRequest / NextResponse

 

Next.js는 표준 웹 API인 Request와 Response를 확장한 NextRequest와 NextResponse를 제공한다. 이를 통해 라우트 핸들러에서 다양한 추가 기능을 사용할 수 있다. NextRequest 객체는 요청과 관련된 다양한 메타데이터에 접근할 수 있게 하고, NextResponse 객체는 응답을 세밀하게 제어하는 메서드를 쓸 수 있다.

import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
    const response = NextResponse.next();
    // 요청 처리 로직
    return response;
}

 

 

GET 메서드: 캐싱

 

Next.js에서 GET 메서드를 사용할 때의 기본 캐싱 동작은 응답 효율성을 높이기 위해 중요한데, 서버가 동일한 요청에 대해 반복적으로 같은 계산을 수행하는 것을 방지함으로써 서버의 부하와 로드 시간을 줄일 수 있다.

export async function GET() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return new Response(JSON.stringify(data), {status: 200});
}