1. 개념 요약

Next.js에서 동적 경로(dynamic route)에 Static Site Generation(SSG)을 적용하면, getStaticPaths()와 getStaticProps()를 함께 사용하여 미리 정의된 파라미터에 대해 정적 페이지를 빌드 시 생성할 수 있다.

이 방식은 빠른 로딩 속도와 SEO 최적화에 유리하며, 서버 요청 없이도 사전에 지정된 페이지를 사용자에게 제공할 수 있다.

2. 배경 지식

• 동적 라우팅: [id].tsx처럼 파일명에 대괄호를 사용해 URL 파라미터를 받는 방식
• SSG: 정적 HTML을 빌드 시점에 미리 생성하는 방식
• getStaticPaths(): 어떤 파라미터 조합으로 페이지를 미리 생성할지 정의
• getStaticProps(): 각 파라미터에 대해 어떤 데이터를 정적으로 패칭할지 정의
• fallback: 경로에 없는 요청이 왔을 때 처리 방식 (false, true, 'blocking')

3. 상세 설명

3-1. 파일 구조 예시

pages/
  books/
    [id].tsx

3-2. getStaticPaths()

export const getStaticPaths = () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } }
    ],
    fallback: false,
  };
};