23년 06월 21일

1. Next API Routes

Routing: API Routes

Next.js API Routes는 Next.js 프레임워크에서 제공하는 기능으로, 서버사이드 또는 클라이언트사이드에서 동작하는 API Endpoint를 손쉽게 생성할 수 있도록 도와준다.

API Routes를 사용하면 api 디렉토리 내에 작성한 파일들이 서버사이드에서 실행되는 API 엔드포인트로 자동으로 매핑되며, 클라이언트사이드에서도 해당 API Endpoint를 호출할 수 있다.

해당 코드는 서버 측 번들로 클라이언트 번들에 포함되지 않으며 해당 기술을 통해 백엔드 서버 없이 서버리스 함수 형태로 프론트엔드에서 API를 만들고 개발할 수 있다.

2. Next API Routes 사용 방법

2-1. req와 res

각 API Routes 파일은 기본적으로 req (요청) 객체와 res (응답) 객체를 받는 핸들러(default function)를 export 해야한다. 이 핸들러 함수는 Endpoint로의 각 요청에 대해 Next.js가 호출한다. 즉, req 와 res 파라미터를 받아서 handle 해줄 export default function 이 반드시 있어야 한다.

• req: node.js 에서 제공하는 http.IncomingMessage 의 인스턴스이다.
  • pre-built middlewares 를 통해 사이즈 제한, CORS 설정 등 편의 기능을 이용할 수 있다.
  • 동적 경로 정보는 req query에 포함되어있어 코드 상에서 쉽게 사용할 수 있다.
• res: node.js 에서 제공하는 http.ServerResponse 의 인스턴스이다.
  • next.js response helper functions 에서 편리한 기능을 제공한다.

pages/api/user.js 파일을 다음과 같이 작성하면, 상태코드 200 OK 와 함께 { name: 'John Doe' } 를 응답하는 API 를 만들 수 있다.

export default function handler(req, res) {
  res.status(200).json({ name: "John Doe" });
}

타입스크립트를 사용한다면 필요한 타입을 import 해야한다.

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: "John Doe" });
}