[ Next.js ] API Routes, Dynamic API Route

API Routes

---

Next.js 프로젝트에서 Node 서버 없이 api를 만들어 배포할 수 있도록 만들어주는 기능입니다. DB에 접근하거나, 시크릿 환경 변수에 접근하는 등에 사용할 수 있습니다.

 

pages/api/*아래에 api를 만들 수 있습니다.

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

 

Dynamic API Route

---

Dynamic route도 지원합니다.

// pages/api/test/[id].js

export default function handler(req, res) {
  const { query } = req;
  const { id } = query;

  res.status(200).json({ name: "test", id });
}

 

 

pages/api

---

pages/api 아래 있는 파일들은 yarn build를 통해서 프로젝트가 빌드될 때 클라이언트 번들에 포함되지 않습니다. Next.js가 파일 용량을 자동으로 최적화해 주는 좋은 사례입니다.

 

결과

---

 

Rendering이란?

---

• 기존 SPA를 만들 때 사용하던 CSR에서의 rendering 표현에 가깝습니다.
• Javascript를 이용해서 HTML 코드를 만드는 행위입니다.

 

Pre-rendering이란?

---

• Build할 때 rendering 된다면? Static-Site generation (SSG)
• runtime에 rendering 된다면? Server-Side Rendering (SSR)

<aside> 💡 runtime이란 무엇인가요? </aside>

• 애플리케이션이 빌드 및 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간을 말합니다.
• Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말합니다. 언제 HTML을 만드느냐에 따라서, Server-Side Rendering과 Static-Site generation으로 나뉩니다.

 

getServerSIdeProps으로 SSR 구현하기

---

• getServerSideProps 함수는 Server에서만 실행됩니다. Browser에서는 실행되지 않습니다.
• getServerSideProps 함수는 runtime에서만 실행됩니다.
• getServerSideProps에서는 context 객체를 통해, Post Page에서는 next router를 통해 Url Query 파라미터에 접근 가능합니다.
• getServerSideProps의 return 값은 Post page의 props로 전달됩니다.

 

 

yarn build

---

yarn build를 하면 .next라는 파일이 생긴다.