API 라우터는 API를 호출할 수 있는 엔드포인트를 생성해준다. 파일 기반 라우팅과 동일하게 파일 기반으로 엔드포인트가 생성된다. pages/api 폴더 내부에 파일을 생성하고 함수를 작성하면 함수를 기반으로 API를 내려줄 수가 있다.

페이지 라우터

코드 예시

import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const result = await 함수();
    res.status(200).json({ result });
  } else {
    res.status(500).json({ error: '에러 발생' })
  }
}

공식 문서 코드의 예제를 보면 위와 같이 handler 함수만 있다.

2개의 매개변수는 next에서 제공하는 타입으로 지정해주고 요청 메서드로 분기처리 해서 로직을 설계하면 끝이다.

단, 위와 같은 상황에서 로직이 길어지면 가독성이 낮아지는 경향이 있기 때문에 별도의 유틸리티 파일로 분리해서 만드는 게 좋을 듯 하다.

페이지 라우터 기준이다.

앱 라우터

앱 라우터의 경우 app/api 폴더의 route.ts 파일로 작성할 수 있지만 기존 API 라우터와 같이 하나의 함수만 존재하는 것은 아니다.

코드 예시

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  const result = await 함수();
  res.status(200).json({ result });
}
 
export async function HEAD(request: Request) {}
 
export async function POST(request: Request) {}
 
export async function PUT(request: Request) {}
 
export async function DELETE(request: Request) {}
 
export async function PATCH(request: Request) {}

export async function OPTIONS(request: Request) {}

위와 같이 여러 개를 정의할 수 있고 HTTP methods 이름을 함수명으로 사용하면 된다.

그래서 직관적으로 파일을 관리하고 사용하려면 가령 httpMethods/GET.ts or POST.ts ... 이런 방식으로 폴더 트리를 가져가도 될 듯 하다.

✏️ 회고

API 라우터를 간단하게 알아봤는데 코드를 어떻게 분리시킬지 고민해보고 추후 작성을 해봐야할 것 같다.
요청 시 인터셉터를 하나 만들어서 요청 전 처리해야할 부분도 필요시 만들면 좋을 듯 싶다.