본문으로 건너뛰기

API Routes

정보

다음은 Next.js 공식 문서를 참고한 글입니다.

배울 내용

How to create an API Route.
Some useful information on API Routes.

Creating API Routes

API Routes의 사용 방법에 대해 알아보자.

pages/api 디렉토리 내에서 다음의 형식을 따르는 포맷으로 API 엔드포인트를 생성할 수 있다.

// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
  // ...
}

이는 서버리스 함수로 배포할 수 있다.

Creating a simple API endpoint

구현하기

다음의 코드를 작성한다.

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

req는 http.IncomingMessage의 인스턴스이며, pre-built된 middlewares이다.
res는 http.ServerResponse의 인스턴스이며, helper functions.이다.
api/hello에 접속하면 다음처럼 데이터를 확인할 수 있다.

API Routes Details

다음은 API Routes에 대해 알아야할 내용들이다.

API Route는 getStaticProps 또는 getStaticPaths으로부터 불러오지 않는다.

대신 server-side에서의 코드를 getStaticProps 또는 getStaticPaths에 직접 작성하거나 헬퍼 함수를 호출해야한다.
getStaticProps 또는 getStaticPaths는 서버 측에서만 실행되며, 클라이언트 측에서 실행되지 않기 때문이다.
이러한 함수는 브라우저용 JS 번들에 포함되지 않는다.

좋은 사례: 양식 입력 처리

API Route의 좋은 사례는 양식 입력을 처리하는 것이다.
예를 들어 페이지에 양식을 만들어 API 경로에 POST 요청을 보내도록 할 수 있다.
그런 다음 코드를 작성하여 데이터베이스에 직접 저장할 수 있다.
API Route 코드는 클라이언트 번들의 일부가 아니므로 서버 측 코드를 안전하게 작성할 수 있다.

export default function handler(req, res) {
  const email = req.body.email;
  // Then save email to your database, etc...
}

미리보기 모드

정적 생성은 페이지가 Headless CMS에서 데이터를 가져올 때 유용하다.
하지만 Headless CMS에서 초안을 작성하고 페이지에서 즉시 초안을 미리 보고자 할 때는 적합하지 않다.
빌드 시점이 아닌 요청 시점에 이러한 페이지를 렌더링하고, 게시된 콘텐츠 대신 초안 콘텐츠를 가져오는 것이 좋다.
이 특정 경우에만 Next.js가 정적 생성을 우회하도록 할 수 있다.
Next.js에는 위의 문제를 해결하기 위한 미리보기 기능이 있고, 이 기능은 API 경로를 활용한다.
이에 대한 자세한 내용은 다음 문서에서 확인할 수 있다.

동적 API 경로

API 경로는 일반 페이지와 마찬가지로 동적일 수 있다.
자세한 내용은 다음 문서에서 확인할 수 있다.

배울 내용
Creating API Routes
Creating a simple API endpoint
API Routes Details