API route

what is API route?

웹 사이트를 단순한 html 페이지 이상으로 만들기 위해서는 API가 필요하다. API는 웹 서버가 외부로 노출하는 URL을 말한다. 이 때 API는 사용자의 요청에 대해 html 페이지를 반환하는 것 이상의 역할을 한다.

1. JSON 형식의 데이터로 응답
2. 사용자의 데이터를 DB에 추가/삭제/수정 하는 등의 작업 후 그 결과로 응답

이 외에도 어떤 API를 구축하냐에 따라 다양한 작업을 수행할 수 있다.

Next.js는 어플리케이션 내에 API를 구축할 수 있게 해주고, 어떤 요청이 들어왔느냐에 따라 다른 작업을 수행할 수 있게 해 준다.

how to add api?

1. pages 폴더 내에 api 폴더를 만든다.
2. api 폴더 내에 생성하는 파일, 폴더명의 규칙은 pages 폴더 안에서 사용되는 규칙과 같다.
   • pages/api/index.js 파일이 있다면, 이 파일의 route는 /api가 된다.
3. api 폴더 내의 파일은 서버 측에서만 실행된다. 즉, 클라이언트 측의 코드로 번들링되지 않는다.
4. 컴포넌트 함수가 아니라, 아래와 같은 함수를 만든다.
   • 함수 내에는 서버 측의 코드를 작성할 수 있고, next.js에 의해 node.js 코드를 express.js 문법(?)으로 작성할 수 있다.

// pages/api/hello.js

export default function handler(req, res) {
// returns a json response with a status code of 200:
  res.status(200).json({ name: 'John Doe' }) 
}

개발 서버를 켠 후, /api/hello에 접속해서 network 탭을 확인해 보면 다음과 같은 정보를 확인해 볼 수 있다.

1. response ⇒ { name: 'John Doe' }
2. headers ⇒ content type, date…

example code

1. json 파일에 데이터를 추가하는 api
2. json 데이터를 반환하는 api
3. getStaticProps와 api ⇒ 자체적으로 만든 api는 getStaticProps에서 사용 불가능
4. dynamic api route
   • ex) api/products/[id]