[Next] generateStaticParams

generateStaticParams이란

Next.js에서 동적 라우트(Dynamic Routes)를 정적으로 생성할 때 사용하는 함수입니다. 이 함수는 빌드 타임에 실행되어 어떤 동적 경로를 미리 만들지 결정하는 데 사용됩니다.

 

 

왜 필요한가요? 🤔

동적 라우트는 URL에 변수(예: [slug], [id])를 포함하는 경로를 의미합니다. 예를 들어, 블로그의 [slug] 페이지는 post-1, post-2 등 다양한 slug 값을 가질 수 있습니다.

generateStaticParams를 사용하면, 서버가 각 요청에 대해 페이지를 동적으로 렌더링하는 대신, 빌드 시점에 모든 가능한 slug 값에 대한 페이지를 미리 생성할 수 있습니다. 이렇게 미리 만들어진 HTML 파일은 CDN에 배포되어 매우 빠르게 사용자에게 전달될 수 있습니다.

작동 방식 ⚙️

1. 빌드 타임 실행: generateStaticParams 함수는 next build 명령어가 실행될 때 딱 한 번 실행됩니다.
2. 매개변수 배열 반환: 이 함수는 동적 세그먼트에 들어갈 매개변수(params) 객체의 배열을 반환해야 합니다. Next.js는 이 배열의 각 객체에 대해 정적 페이지를 생성합니다.
3. 정적 페이지 생성: 반환된 매개변수 배열에 따라 동적 라우트 페이지가 모두 빌드됩니다.

코드 예시 💻

블로그 게시물 페이지를 정적으로 생성하는 예시입니다.

JavaScript

 

// app/blog/[slug]/page.tsx

// 1. generateStaticParams 함수를 정의합니다.
export async function generateStaticParams() {
  const posts = await getPostsFromDatabase(); // DB 또는 API에서 모든 게시물 데이터를 가져옴

  // 2. 각 게시물에 대한 slug를 포함하는 객체 배열을 반환합니다.
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// 3. 페이지 컴포넌트는 매개변수를 받습니다.
export default function PostPage({ params }: { params: { slug: string } }) {
  // params.slug를 사용하여 특정 게시물 데이터를 가져와 렌더링
  return (
    <div>
      <h1>게시물 제목: {params.slug}</h1>
      {/* ... */}
    </div>
  );
}

주의할 점 ⚠️

• 빌드 시점: generateStaticParams는 빌드 시에만 실행되므로, 런타임에 동적으로 추가되는 새로운 게시물은 자동으로 포함되지 않습니다. 새로운 게시물이 추가되면 빌드를 다시 해야 합니다.
• dynamicParams: generateStaticParams를 정의하면 dynamicParams의 기본값이 true에서 false로 변경됩니다. 이는 generateStaticParams가 반환하지 않은 경로에 접근하면 404 페이지를 반환한다는 의미입니다. 만약 알 수 없는 경로도 서버에서 동적으로 렌더링하고 싶다면, dynamicParams = true를 명시적으로 설정해야 합니다