Next.js API Routes

Lipton·2023년 4월 5일

Next.js

목록 보기

3/4

Next.js는 API 경로를 지원하므로 API 엔드포인트를 Node.js 서버리스 기능으로 쉽게 생성할 수 있습니다.

Creating API Routes

API 경로를 사용하면 Next.js 앱 내부에 API 엔드포인트를 생성할 수 있습니다. 다음 형식의 pages/api 디렉토리 내에 함수를 생성하여 그렇게 할 수 있습니다.

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

서버리스 함수(람다라고도 함)로 배포할 수 있습니다.

Creating a simple API endpoint

시도해 봅시다. 다음 코드를 사용하여 pages/api에 hello.js라는 파일을 만듭니다:

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

http://localhost:3000/api/hello에서 액세스해 보십시오. {"text":"Hello"}가 표시되어야 합니다.

참고:

req는 http.IncomingMessage의 인스턴스와 일부 미리 빌드된 미들웨어입니다.
res는 http.ServerResponse의 인스턴스와 일부 헬퍼 함수입니다.

getStaticProps 또는 getStaticPaths에서 API 경로를 가져오지 않음

getStaticProps 또는 getStaticPaths에서 API 경로를 가져오면 안 됩니다. 대신 서버측 코드를 getStaticProps 또는 getStaticPaths에 직접 작성하거나 헬퍼 함수를 호출하세요.

이유는 다음과 같습니다. getStaticProps 및 getStaticPaths는 서버 측에서만 실행되며 클라이언트 측에서는 실행되지 않습니다. 또한 이러한 기능은 브라우저용 JS 번들에 포함되지 않습니다. 즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성할 수 있습니다. 자세한 내용은 Writing Server-Side code 문서를 읽어보세요.

좋은 사용 사례: 양식 입력 처리

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

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

Preview Mode

정적 생성은 페이지가 헤드리스 CMS에서 데이터를 가져올 때 유용합니다. 그러나 헤드리스 CMS에서 초안을 작성할 때 페이지에서 즉시 초안을 미리 보고 싶을 때는 적합하지 않습니다. Next.js가 빌드 시간 대신 요청 시간에 이러한 페이지를 렌더링하고 게시된 콘텐츠 대신 초안 콘텐츠를 가져오길 원할 것입니다. 이 특정한 경우에만 Next.js가 정적 생성을 우회하기를 원할 것입니다.

Next.js는 위의 문제를 해결하기 위해 미리보기 모드라는 기능이 있으며 API 경로를 활용합니다. 자세한 내용은 Preview Mode 설명서를 참조하십시오.