generateStaticParams が返したslug、どこ行った？？

2つ前の記事で、SSGではgenerateStaticParams を使うことで 動的ルートでもビルド時にslugごとの静的ページを生成、 リクエストがあったときは静的HTMLを描画するので表示速度が速い、ということを学びました。

ただしここで疑問が1つ。 generateStaticParams が返した slug たちは、いったいどこに行くのだろう？？

今日はもう少しgenerateStaticParams についての理解を深めていきたいと思います。

きっかけ

まずは前回の復習。

Next.jsのSSGは、ビルド時にgenerateStaticParams で指定された記事の静的HTMLを作る。

で、このブログの generateStaticParams 例はこちら。

/** ビルド時に静的生成する公開済み記事のslugを取得する。 */
export async function generateStaticParams() {
  const posts = await getPublishedPosts()

  return posts.map((post) => ({ slug: post.slug }))
}

なるほど。公開記事一覧から、slugだけ取り出して一覧として返却している。 で、この返されたslug一覧はどこに行くのか？？

そしてもう一つの疑問。

Propsに、、、Promiseが付いている？？？

Reactでは基本こんなことしませんね。。 これはgenerateStaticParamsが asnycだから？？

type PostPageProps = {
  params: Promise<{
    slug: string
  }>
}

generateStaticParams のslugはどこに行く？

まず最初の疑問から。 今回の generateStaticParams は、こんなイメージの配列を返します。

[
  { slug: "article-a" },
  { slug: "article-b" },
]

そしてNext.jsは、このslugを動的ルート[slug]と対応付ける。

posts/[slug]/page.tsx という構成なら、

/posts/article-a /posts/article-b

というルートの静的ページがビルド時に生成されます。

で。この各ページを生成するとき、Page側ではその値を params から取得できます。

/** 公開済み記事の詳細ページを生成する。 */
export default async function PostPage({ params }: PostPageProps) {
  const { slug } = await params
 ...

つまり、

generateStaticParamsがPageコンポーネントへ直接Propsを渡しているわけではない。 generateStaticParamsが返した値をNext.jsが動的ルートと対応付け、Page側ではparamsとして取得できる、という仕組みでした。

今回の学び

generateStaticParamsで返したslugは、Next.jsによって動的ルートと対応付けられ、Page側ではparamsから取得できる。

今まで何となく「静的生成するslugの一覧を返している」と理解していましたが、その値が実際のPageまでどう繋がっているのかが今回ようやく見えてきました。

Nextは知らないことだらけですが、すでに出来上がっているブログから、1つ1つ技術を体感していけるのは本当に楽しいですね。