Next.js API 라우팅

Next.js에서는 페이지를 만드는 것처럼 간단하게 백엔드 API를 만들 수 있는데요. 사실상 작은 Node.js 서버를 구현할 수 있습니다. 백엔드 개발자 없이 간단한 API도 개발하고 싶고, 프론트엔드도 개발하고 싶은 사람들에게 유용한 기능이겠죠? 이번 레슨에서는 간단한 예시를 통해서 어떤 기능인지 살펴보고 넘어가겠습니다.

우선 /pages 폴더 아래에 /api라는 폴더를 만들고요, 여기다가 특별한 형태의 자바스크립트 파일을 추가하면 됩니다.

/pages/api/cart.js

let cart = [];

export default function handler(req, res) {
  if (req.method === 'GET') {
    return res.status(200).json(cart);
  } else if (req.method === 'PUT') {
    cart = req.body;
    return res.status(200).json(cart);
  } else {
    return res.sendStatus(404);
  }
}

이렇게 default export로 리퀘스트 객체(req)와 리스폰스 객체(res)를 파라미터로 받는 함수를 만들면 됩니다. 리퀘스트 객체와 리스폰스 객체는 Node.js의 리퀘스트 객체와 리스폰스 객체인데요.

위 코드는 GET 리퀘스트를 보냈을 때 cart 배열을 리스폰스로 보내 주고, PUT 리퀘스트를 보냈을 때 cart 배열을 수정하는 간단한 코드입니다.

리퀘스트와 리스폰스 객체에 대해서는 이번 토픽에서 자세히 다루지 않겠습니다. 혹시 궁금하신 분들은 코드잇에서 Node.js 관련 토픽을 들어보세요.

이 API의 주소는 Next.js에서 페이지를 만들었을 때의 주소와 마찬가지입니다. /api/cart.js라는 경로이니까 /api/cart라는 주소로 리퀘스트를 보내면 파일에 있는 핸들러 함수를 실행해서 리스폰스를 보내 주는 형태입니다.

웹 브라우저에서http://localhost:3000/api/cart라는 주소로 접속하거나, API 테스트를 해 보면 아래와 같은 JSON 데이터가 리스폰스로 전달될 겁니다.

GET 리퀘스트를 보낼 때

GET http://localhost:3000/api/cart
Content-Type: application/json

GET 리퀘스트를 보내고 받은 리스폰스 예시

[]

PUT 리퀘스트를 보낼 때

PUT http://localhost:3000/api/cart
Content-Type: application/json

[1, 2, 3]

PUT 리퀘스트를 보내고 받은 리스폰스 예시

[1, 2, 3]

리퀘스트 객체를 활용하면 리퀘스트의 헤더나 쿠키 같은 값을 사용해서 다양한 동작을 하도록 만들 수 있는데요. 이번 토픽에선 따로 API를 만들거나 하지는 않을 거니까, 일단 이런 기능이 있다는 정도로만 알고 넘어갑시다. 혹시 더 궁금하신 분들은 아래의 링크를 참고해 보세요.

참고 자료
Next.js - API Routes