https://nextjs.org/learn/basics/api-routes

Node.js serverless function으로 API endpoint를 쉽게 만들수 있습니다. 블로그 앱에는 필요하지 않지만 간단하게 사용하는 방법을 소개

포스트에서 다룰 내용

• 어떻게 API Route을 만드는지
• API Routes에 대한 유용한 정보

Creating API Routes

https://nextjs.org/learn/basics/api-routes/creating-api-routes

API Routes을 이용해 Next.js app안에 API endpoint를 만들수 있다. pages/api안에 함수를 만들면 된다.

// req = request data, res = response data
export default (req, res) => {
  // ...
}

serverless Functions으로 배포가 가능하다. (also known as lambdas)

Creating a simple API endpoint

pages/api에 hello.js를 만들어보자

export default (req, res) => {
  res.status(200).json({ text: "Hello" })
}

/api/hello로 호출하면 응답이 온다.

• req: https://nodejs.org/api/http.html#http_class_http_incomingmessage

  • pre-built middlewares : https://nextjs.org/docs/api-routes/api-middlewares

• res: https://nodejs.org/api/http.html#http_class_http_serverresponse

  • helper functions: https://nextjs.org/docs/api-routes/response-helpers

API Routes Details

https://nextjs.org/learn/basics/api-routes/api-routes-details

Do Not Fetch an API Route from getStaticProps or getStaticPaths

getStaticProps또는 getStaticPaths에서는 API Route를 가져오지(fetch) 않아야 한다. 대신 getStaticProps 또는 getStaticPaths에서 직접 server-side 코드를 작성해야 한다.

getStaticProps와 getStaticPaths는 오직 server-side에서 동작한다. client-side에서는 실행되지 않는다. 브라우저 용 JS 번들에도 포함되지 않는다. 즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성할 수 있다.

A Good Use Case: Handling Form Input

form input을 처리하기 위한 API Routes의 좋은 사용예다. 예를 들어 페이지에서 form을 만들고 API Route에 POST 요청을 보내도록 할 수 있다. 그런 다음 코드를 작성하여 데이터베이스에 직접 저장할 수 있다. API Route 코드는 클라이언트 번들의 일부가 아니므로 server-side code를 안전하게 작성할 수 있다.

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

Preview Mode

Static Generation은 headless CMS에서 데이터를 가져올 때 유용하다. 그러나 headless CMS에서 초안을 작성하고 페이지에서 즉시 초안을 미리보고 싶은 경우에는 적합하지 않다. Next.js가 build time이 아닌 request time에 이러한 페이지를 렌더링하고 게시된 콘텐츠 대신 초안 콘텐츠를 가져오기를 원한다. 이 특정 경우에만 Next.js가 정적 생성을 우회하기를 원한다.

Next.js에는 위의 문제를 해결하기 위한 Preview Mode라는 기능이 있으며 API Route를 활용한다.

Preview Mode document