Next13 Route Handler 사용해보기

개요

Next 13에서 App Router가 추가되면서 많은 점이 바뀌고 기능이 추가되었는데, 프로젝트를 진행하다가 Route Handler라는 기능을 발견하고 적용하는 과정에서 조금 더 편리함을 느껴 포스팅한다.

Route Handler란?

Next 13에서 추가된 App Router 즉 app directory를 사용해야만 Route Handler 기능을 사용할 수 있으며 기존 버전에서 사용되던 Api Routes와는 사용법에서 차이점이 있다.

❗ 주의사항

• 앱 라우터는 페이지 라우터보다 우선 순위가 높다.
• 만약 같은 경로의 Api Routes 와 Route Handler를 생성한다면 에러가 발생한다.
  

기존 Api Routes와 Route Handler 비교

Static Route Handlers

// Api Routes
// pages/api/user.ts
import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) { 
  // 모든 요청을 handler가 받기 때문에 if문을 
  // 통한 분기처리를 해야 HTTP 메소드마다 처리를 할 수 있다.
  if (req.method === 'GET') { 
    res.status(200).json({ name: 'John Doe' })
  }else if(req.method === 'POST'){
    (...)
  }
}

// Route Handler
// app/user/route.ts
import { NextResponse } from 'next/server'
 
export async function GET() {	// 해당 경로로 GET 요청 시 대응가능
  return NextResponse.json({ name: 'John Doe' })
}

export async function POST() {	// 해당 경로로 POST 요청 시 대응가능
  return NextResponse.json({ name: 'John Doe' })
}

기존 정적 경로 api를 처리할때 Api Routes의 경우 pages/api 아래 작성해야하며 handler 함수가 모든 요청을 처리하기 때문에 메소드에 따른 분기처리를 해주어야 GET, POST 등등 각자 요청을 처리할 수 있게 되었는데 새로 추가된 Route Handler의 경우 애초에 각각 GET,POST 등 HTTP 메소드 이름으로 함수를 생성해서 각 메소드 별로 어떤 처리를 하는지 한눈에 알아볼 수 있다.

Route Handler경우 GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS를 지원한다.

Route Handler는 함수의 두번째 인자로 response 객체를 제공하지 않기 때문에 NextResponse를 import하여 사용한다.

Dynamic Route Handlers

// Api Routes
// pages/api/user/[id].ts
import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) { 
  const { query } = req; // 첫번째 인자인 req에서 query.id로 동적 세그먼트에 접근할 수 있다.

  return res.status(200).json({ id: query.id });
}

// Route Handler
// app/user/[id]/route.ts
import { NextResponse } from 'next/server'
 
export async function GET(req: Request, { params }: {params:{id:string}}) {
  // 두번째 인자인 context에서 params 객체에 접근하여 동적 세그먼트에 접근할 수 있다.
  return NextResponse.json({ id: params.id });
}

const onClick = async () => {
  const data = await (await fetch("/api/user/123")).json();
  console.log(data); // 두 Api 모두 { id: "123" }을 리턴한다.
};

정리

Api Routes

Api Routes 의 경우 pages/api 디렉토리 내부에 모든 api 를 작성하기 때문에 단순한 파일구조를 가지고 있다. 또한 13버전 이전까지 계속해서 사용해왔기 때문에 안정성면에서는 높다고 생각한다.

하지만 handler 함수 내부에 HTTP 메소드들을 모두 넣기 때문에 동일 경로에 여러 메소드들을 처리한다면 가독성이 많이 떨어지는 단점이 있다.

Route Handler

Route Handler의 경우 app 디렉토리 내부에 페이지를 만들듯이 route.ts를 생성하면 해당 경로로 api를 라우팅 할 수 있다. 만약 product 페이지에서만 사용하는 api가 있다면 product/api/route.ts로 밀집도 있게 관리할 수 있다는 장점이 있다.
(다만, 정해진 규칙 없이 사용하게 된다면 큰 혼란을 초래할 것이다.)

또한 route.ts 내부에 HTTP 메소드별로 함수를 작성하여 분리할 수 있기 때문에 조금 더 나은 가독성을 가지는 장점이 있다.