Next.js 의 API routes

Next js API Routes 란?

Next.js 에서 놀랍게도 API 를 빌드할 수 있는 솔루션을 제공한다.

더이상 프론트엔드 프레임워크로 보기엔 무리가 있을 것 같다.

pages/api 내부에 있는 파일은 /api/* 로 매핑되어 page 가 아닌 API 엔드 포인트가 된다. 서버사이드에서만 번들링되고 클라이언트 사이드의 번들링 크기를 키우지 않는다.

예제

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

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

API Routes 는 next.config.js 파일 내부 pageExtensions 설정에 의해 영향을 받는다.

사용법 세부사항

• req 와 res 파라미터를 받아서 handle 해줄 export default function 이 반드시 있어야 한다.
  • req: node.js 에서 제공하는 http.IncomingMessage 의 인스턴스이다.
    • pre-built middlewares 를 통해 사이즈 제한, CORS 설정 등 편의 기능을 이용할 수 있다.
  • res: node.js 에서 제공하는 http.ServerResponse 의 인스턴스이다.
    • next.js response helper functions 에서 편리한 기능을 제공한다.

export default function handler(req, res) {
  if (req.method === "POST") {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

HTTP 메서드마다 다른 응답을 해주고 싶다면, 위처럼 req.method 에 대한 if 문 등으로 처리할 수 있다.

유즈 케이스

다른 API 로 연결하는 통로로 써도 나쁘지 않다.

실수하기 쉬운 부분

Content-Type 헤더 설정과 파싱

body 로 "{email: "my_email@naver.com"}" 이라는 문자열을 받았다고 가정하자. api 의 handler 는 아래와 같이 작성되었다.

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  console.log(req.body.email); // undefined
  res.status(200).json({ result: "success" });
}

위의 console.log(req.body.email) 의 결과는 undefined 이다. 그 이유는 파싱이 되지 않았기 때문이다. (JSON.parse(req.body)).email 을 하면 원했던 결과인 my_email@naver.com 이 잘 나올 것이다.

위와 같이 직접 파싱하지 않아도 자동으로 파싱된 형태로 데이터를 받아볼 수도 있는데, 그러기 위해서는 headers 에 {"Content-Type": "application/json"} 을 적어주면 된다. Content-Type 을 참조하여 미들웨어 단계에서 문자열을 파싱해줄 것이다.

생각보다 많은 개발자들이 실수하는 부분이니 유의하자.

기타 주의점

• CORS 헤더를 따로 지정하지 않아서, 기본 값이 same-origin only 로 설정되어 있다.
  • 단, CORS Middleware 를 통해 변경 가능하다.
• API Routes 는 next export 와 함께 사용될 수 없다.