[id] 폴더 내 page.tsx로 생성한 동적 경로의 경우, 디폴트로 Dynamic 페이지가 된다.

params를 통해 경로를 동적으로 받아오기 때문이다.

// 기존 코드

export default async function Page({ params }: { params: Promise<{ id: string | string[] }>}) {
  
  const resolvedParams = await params;
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${resolvedParams.id}`
  );
  if (!response.ok) {
    return <div>오류가 발생했습니다.</div>;
  }

  const book = await response.json(); 

  const { title, subTitle, description, author, publisher, coverImgUrl } =
    book;

  
  return (
    <div>
      <div>
        <img src={coverImgUrl} />
      </div>
      <div>{title}</div>
      <div>{subTitle}</div>
      <div>
        {author} | {publisher}
      </div>
      <div>{description}</div>
    </div>
  );
}

이 경로를 마치 pre-fetching 하듯이 미리 지정하고, 빌드 타임에 생성할 수 있을까? ( ≒ getStaticPath )

<aside> 💡

generateStaticParams() 를 선언한다.

→ 어떤 URL parameter가 존재할 수 있는지 명시하는 것.

</aside>

export function generateStaticParams() {
	return [{ id: "1" }, { id: "2" }, { id: "3" },] // 반드시 문자열로 작성
}

위 함수를 함께 작성하면 id 1, 2, 3번에 대한 동적 경로가 빌드 타임에 Static하게 생성되는 것을 확인할 수 있다.

참고로, generateStaticParams 로 설정된 페이지는 무조건 Static 페이지로 강제 설정된다.