Next.js 공식 홈페이지에서 제공하는 튜토리얼 step 7

step 6 와 이어집니다.

Creating API Routes

API Routes를 사용하면 Next.js 앱 안에 API end point를 만들 수 있습니다.
pages/api 에 다음과 같은 포멧으로 작성 할 수 있습니다.

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

더 자세한 내용은 https://nextjs.org/docs/api-routes/introduction 에서 확인하세요.

Creating a simple API endpoint

한번 간단한 API를 만들어 볼까요 pages/api/hello.js 에 다음과 같이 작성해 보세요.

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

그다음 여기 접속해 보세요 http://localhost:3000/api/hello 그러면 {"text":"Hello"} 를 확인 할 수 있을 겁니다.

더 많은 tips 들을 https://nextjs.org/docs/api-routes/introduction 여기서 확인하세요

API Routes Details

여기엔 위에 tips중 중요한 내용을 모았습니다.

API Route에서 getStaticProps, getStaticPaths 사용하면 안됩니다

getStaticProps, getStaticPaths에서 API Route를 가져와서는 안 됩니다.
대신 getStaticProps, getStaticPaths에 server side 코드를 직접 작성하십시오.

A Good Use Case: Handling Form Input

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

Dynamic API Routes

API 경로는 일반 페이지와 마찬가지로 동적일 수 있습니다. 자세한 내용은 동적 API 루트 문서를 참조하십시오.