API Route

• API Route를 사용하면 next.js 앱의 API endpoint를 함수 하나로 생성할 수 있다.
• API Route를 활용하여 Serverless한 앱을 만들 수 있다.

export default function handler(req, res) {
  //...
}

API Endpoint?

• API의 특정 진입 지점
• base URL 뒤에 붙는 특정 키워드를 의미
• ex:) ${baseURL}/about에서 /about이 엔드포인트
• 각각의 엔드포인트를 통해 각각 다른 응답을 기대할 수 있다.

API Endpoint 생성하기

• pages/api 디렉토리 내의 모든 파일은 /api/*에 매핑되며 페이지 대신 API Endpoint로 처리된다.
• req: 들어오는 요청(reqest)을 구문 분석하는 내장 미들웨어를 제공
  • req.cookies: 요청에서 보낸 쿠키가 포함된 객체
  • req.query: 요청에서 보낸 쿼리가 포함된 객체
  • req.body: content-type으로 Http body로 보내는 데이터들이 포함
• res: 새로운 API Endpoint를 생성하는 유용한 헬퍼 메서드가 포함된 Response 객체
  • req.status(code): 상태 코드를 설정하는 함수
  • req.json(body): JSON 응답을 보내는 함수 body는 직렬화 가능한 객체여야 함
  • req.send(body): JSON 응답을 보내는 함수 body는 string, object, buffer
  • res.redirect([status, ] path): 지정된 경로로 redirection, status의 default 값은 307(임시 리디렉션)

// pages/api/hello.js => http:localhost:3000/api/hello
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

참고사항

• getStaticProps와 getStaticPaths에서 API Route를 불러오면 안된다.
  • 이 둘은 서버에서만 실행되기 때문에
• API Route는 CORS headrs를 지정하지 않는다. (즉, 동일한 출처를 의미)