📈

Nextjs generate static params について

2023/11/23に公開

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

例えば、ECサイトで商品が1000個ある時、
propducts/[item]をSSGで静的にHTMLで作ります。[item]は何が来るかわからないので空で作られています。
骨格はpre-renderingになっていますが、[item]は動的に作られてSSRみたいに作られて送られます。
ここで、商品があまりもなくてまたは人気商品とか先に作り時は generateStaticParams()を使います。

type Props = {
 params: {
  item: string;
 }
}
export default function Product({ params }:Props) {
 return <h1>{params.item}</h1>
}
export function generateStaticParams() {
  const products = ["t-shirt", "pants"];
  return products.map((product) => ({
    item: product,
  }));
}
  1. 先にレンダリングしたいitemのnameを決めます。(先に経路を作りたい)
  2. mapでそれぞれのアイテムをラッピングした後、paramsに入る形にしてくれる(item:product)
  3. returnする

ビルドしたら products が静的にレンダリングされているのが確認できます。

○ (Static) prerendered as static content
→自動的に静的に作ってくれる
● (SSG) prerendered as static HTML (uses getStaticProps)
→動的に作られたが、props形で与えたのである

Discussion