[Next.js] Route handlers

Route handlers

app 디렉토리(폴더) 내에서만 route.ts 또는 route.js 폴더를 생성해 사용할 수 있고, page.tsx의 API Routes와 같은 기능을 하기 때문에 같이 사용할 필요가 없습니다.

API Routes는 Pages Router 기반 프로젝트에서 서버 측 코드를 작성할 수 있게 해주는 기능입니다.

 

여기서 Pages Router는 Next.js 13 이전에 경로를 생성하는 주요 방법이었습니다. 지금까지 배워왔던 방식과는 조금 다르게 폴더가 아닌 파일로 라우팅을 했습니다. app폴더가 아닌 pages 폴더가 기준입니다.

'/' : pages/index.tsx
'/something' : pages/something.tsx
'/api/user' : pages/api/user.ts

 

위처럼 작업이 진행되었었지만 Next.js 13부터는 App Router 기반으로 변경되었고, 기존 Pages Router에서 migration 하라고 추천합니다.

 

그래서 'page.tsx의 API Routes와 같은 기능을 하기 때문에 같이 사용할 필요가 없습니다.'라고 말한 내용은 App Router의 Route handlers와 Pages Router의 API Routes가 같은 동작을 하기 때문에 같이 사용할 필요가 없다는 의미입니다.

만약 하나의 폴더에 page.tsx와 route.ts 모두 존재한다면 route.ts가 우선되어 화면이 나오지 않습니다. 그렇기에 같은 폴더 내부에 api 폴더를 따로 만들어 사용하는 것을 추천합니다.

 

GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS HTTP 메서드를 지원합니다. 지원하지 않는 경우 405 에러를 반환합니다.

// route.ts

// GET 예시
export async function GET() {
  return Response('nulzi');
}

export async function GET() {
  const res = await fetch('...', {...});
  const data = await res.json();
  
  return Response.json({ data });
}

 

결국 Route handlers를 통해 간단한 API를 만들어서 사용하는 것이 목표입니다. 해당 기능을 사용하면 클라이언트 측에서 직접적인 요청을 하지 않아 보안적으로 더 안전할 수 있습니다.

 

API를 만들 수 있으면 백엔드가 따로 필요 없는 건가 하고 생각할 수 있지만, 백엔드가 전혀 필요 없다는 의미는 아닙니다. 앱의 규모가 커지고 필요한 기능과 데이터가 많아지면 별도의 서버가 있는 것이 좋습니다.

 

다음 시간에 좀 더 사용 방법과 자세한 내용을 공부해 보겠습니다.

 

참고

https://nextjs-ko.org/docs/app

https://nextjs-ko.org/docs/pages

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY