next.js route handler에 대해서 알아보자

오늘은 최근에 적용해본 next.js에서 제공하는 route handler라는 기능에 대해서 글을 써보려고 합니다!!

 

---

route handler란?

next.js에서 제공하는 기능 중 하나로 특정 경로에 대한 사용자 정의 요청 처리기(custom request handler)를 생성할 수 있습니다

요청과 응답 api를 사용하여 이를 구현하고 app 폴더 안에서만 사용 가능합니다

왜 필요할까?

• 요청에 따른 로직처리: 요청에 따른 로직처리를 더욱 더 편리하고 깔끔하게 가능합니다
• 메서드: get, post, put, delete 메서드에 따라서 다른 처리를 하도록 구조화할 수 있습니다
• 캐싱: 캐싱을 이용해서 네트워크 요청의 부하를 줄이고 속도를 개선할 수 있습니다
• 보안 강화: 입력 검증, 인증과 같은 보안 관련 처리를 라우트 핸들러에서 수행함으로서 보안을 강화할 수 있습니다
• 유연한 응답 구성: http 상태코드와 헤더를 설정하여서 요청에 따른 정교한 응답을 구성할 수 있습니다

---

사용 해보기

/* app/api/route.ts */
export async function GET(request: Request) {}

라우트 핸들러는 app 폴더 안에 api 폴더를 만들고 그 안에 route.js | route.ts로 정의됩니다

page.js과 동일한 라우트 세그먼트 레벨에 route.js파일이 있을 수 없습니다

 

지원 메서드

라우트 핸들러는 다음과 같은 메서드를 지원합니다

• GET: 데이터를 조회할 때 사용합니다
• POST: 새로운 데이터를 생성할 때 사용합니다
• PUT: 기존 데이터를 수정할 때 사용합니다
• DELETE: 데이터를 삭제할 때 사용합니다
• PATCH: 데이터의 일부를 업데이트할 때 사용합니다
• OPTIONS: 서버가 지원하는 메서드를 확인할 때 사용합니다
• HEAD: GET 요청과 거의 비슷하지만 본문을 제외한 헤더 정보만 요청하는 메서드입니다

cookies

import { cookies } from 'next/headers'
 
export async function GET(request: Request) {
  const cookieStore = cookies()
  const token = cookieStore.get('token')
 
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token}` },
  })
}

cookies를 사용하여서 쿠키를 읽을 수 있습니다

이 서버 함수는 라우트 핸들러에서 직접 호출하거나 다른 함수 내에 중첩하여 호출할 수 있습니다

headers

import { headers } from 'next/headers'
 
export async function GET(request: Request) {
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { referer: referer },
  })
}

headers를 사용하면 헤더를 읽을 수 있습니다 

이 서버 함수도 라우트 핸들러에서 직접 호출하거나 다른 함수 내에 중첩하여 호출할 수 있습니다

headers는 읽기 전용입니다 헤더를 설정하려면 새로운 헤더를 가진 새로운 응답을 반환해야 합니다

CORS

next.js에서는 라우트 처리기를 사용하여 특정 API 경로에 대해 CORS 정책 설정을 할 수 있습니다

이 설정은 외부 도메인에서 현재 도메인의 리소스에 접근할 수 있게 허용하는 규칙을 정의합니다

export async function GET(request: Request) {
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  })
}

---

글을 마치며

이렇게 글을 쓰면서 공식문서를 더 읽어보게 되었는데 새로 알게 된 기능도 있어서

다음에 한 번 적용해보면 좋을거 같다는 생각이 들었습니다

글을 읽어주셔서 감사합니다