[Next.js] API 경로 세부정보

API 경로에 대해서 알아야 할 몇가지 필수 정보를 정리 해보겠습니다.

---

1. getStaticProps 또는 getStaticPaths에서 API 경로를 가져오지 마십시오.

getStaticProps 또는 getStaticPaths에서 API 경로(pages/api/~~)를 가져오면 안됩니다.

대신 getStaticProps 또는 getStaticPaths에 직접 서버 측 코드를 작성하세요. (또는 도우미 함수를 호출 하세요.)

 

왜냐하면 getStaticProps와 getStaticPaths는 서버 측에서만 실행되고, 클라이언트 측에서는 실행되지 않습니다.

브라우저용 JS 번들에도 포함되지 않습니다.

즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성 할 수 있습니다.

---

2. 좋은 사례 : 양식 입력 처리

API 경로의 좋은 사용 사례는 양식 입력을 처리하는 것입니다.

예를 들어 페이지에서 양식을 생성하고 POST API 경로에 요청을 보낼 수 있습니다.

그런 다음 코드를 작성하여 데이터베이스에 직접 저장 할 수 있습니다.

API 경로(pages/api/~~) 코드는 클라이언트 번들의 일부가 아니므로 서버 측 코드를 안전하게 작성 할 수 있습니다.

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

---

3. 미리보기 모드

정적 생성은 페이지가 헤드리스 CMS에서 데이터를 가져 올 때 유용합니다.

그러나 헤드리스 CMS에서 초안을 작성하고 페이지에서 즉시 초안을 미리 보려면 이상적이지 않습니다.

Next.js가 빌드 시간 대신 요청 시간에 이러한 페이지를 렌더링 하고

게시된 콘텐츠 대신 초안 콘텐츠를 가져오기를 원할 것입니다.

 

이 특정 경우에만 Next.js가 정적 생성으로 우회하기를 원할 것입니다.

---

4. 동적 API 경로

API 경로는 일반 페이지와 마찬가지로 동적일 수 있습니다.

더 자세한 내용은 동적 경로 설명서를 참고

API Routes: Dynamic API Routes | Next.js

[Next.js] 동적 라우팅 사용하기

---

 

Learn | Next.js