generateStaticParams

ジェネレートスタティックパラムス

generateStaticParams を分かりやすく

generateStaticParams は、Next.js が提供する関数で、動的ルートセグメントと組み合わせて、リクエスト時に必要に応じてではなく、ビルド時に静的にルートを生成するために使用できます。つまり、ビルド時に実行され、返されたリストを使用して静的ページを生成します。

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

Routing: Dynamic Routes | Next.js

例えば、次の例を考えてみましょう。e コマースウェブサイトがあり、/products/:id のルートを使用して、特定の製品の詳細ページにアクセスしたいとします。ただし、製品 ID は動的であるため、リクエストごとにデータベースからフェッチする必要があります。

この場合、generateStaticParams 関数を使用して、すべての可能な製品 ID をビルド時に静的に生成できます。次に、getStaticPaths 関数を使用して、これらの静的 ID を使用して、製品の詳細ページをビルドできます。これにより、データベースから製品データをフェッチせずに、製品の詳細ページをすばやく提供できます。

こちらの回答もわかりやすいかと思います。

もしあなたが書店を経営していて、歴史、小説など、さまざまな種類の本があり、それぞれの本に ID が付与されている場合、getAllBooks API を呼び出し、/books/[type]/[book-id] の組み合わせを作成します。これにより、すべての本のすべての組み合わせ、つまり各タイプ + ID の組み合わせに対してページが生成されます。ページの params オブジェクトには、そのコンテキストで必要なロジックにアクセスするために、タイプと ID が含まれます。 getStaticPaths を使用する場合、これは getStaticProps に渡され、データが取得されますが、サーバーコンポーネントは自分でこれを行うことができるため、generateStaticPaths はそれを直接サーバーコンポーネントに渡します。 Can anyone explain how generateStaticParams() works along with the param object in next 13? · vercel/next.js · Discussion #44641

お店で本を探しているとします。お店には歴史書、小説、エッセイなど、さまざまな種類の本があります。本にはすべて ID が付いています。本を探すときは、ID を使ってお店の人に探してもらうことができます。今、お店で本を探す特別な方法を考えてみましょう。お店の人に「歴史書で、ID が 101 の本を探しています」と言う代わりに、「歴史書と ID」の組み合わせをお店の人に渡すことができます。お店の人は、それぞれの組み合わせに対応する本を用意します。

引数と戻り値

generateStaticParams は、次の引数を取ります。

routes: 生成するルートの配列。
params: 各ルートに渡されるパラメータのオブジェクト。

generateStaticParams は、次の戻り値を返します。

静的に生成されたルートの配列。

generateStaticParams は、Next.js v13 で導入されました。

たとえば、次のコードは、/products/[id] のルートを生成するために使用されます。

const generateStaticParams = () => [
  {
    path: '/products/1',
    params: { id: 1 },
  },
  {
    path: '/products/2',
    params: { id: 2 },
  },
]

このコードをビルドすると、/products/1 と /products/2 の 2 つの静的ページが生成されます。

ルート内の複数のダイナミックセグメントで generateStaticParams を使用すると、親が生成した各パラメータセットについて、子 generateStaticParams 関数が 1 回実行されます。params オブジェクトには、親の generateStaticParams から入力されたパラメータが含まれ、子セグメントのパラメータを生成するために使用できます。

たとえば、次の generateStaticParams 関数は、/products/:id のルートをビルド時に静的に生成します。

const generateStaticParams = ({ id }) => ({
  id,
})

generateStaticParams 関数は、getStaticPaths 関数から呼び出すことができます。

const getStaticPaths = async () => {
  const products = await fetch('https://.../api/products');
  const productIds = products.map((product) => product.id);
  return {
    paths: productIds.map((id) => ({
      params: { id },
    }),
    fallback: false,
  };
};

getStaticPaths 関数は、ビルド時にすべての可能なパスを生成します。この場合、/products/1、/products/2、/products/3 などです。

getStaticProps 関数は、各静的パスに対して呼び出されます。

const getStaticProps = ({ params }) => {
  const product = await fetch(`https://.../api/products/${params.id}`)
  return {
    props: { product },
  }
}

getStaticProps 関数は、各静的パスのデータにアクセスするために使用できます。この場合、/products/1 の場合、product オブジェクトには、/products/1 に対応する製品が含まれます。

getStaticProps 関数は、各静的パスに対して 1 回だけ呼び出され、ビルド時に生成されたファイルに格納されます。このため、リクエストが受信されたときに、データベースや API からデータをフェッチする必要はありません。

generateStaticParams 関数は、動的ルートセグメントをビルド時に静的に生成するために使用できる強力なツールです。これにより、パフォーマンスを向上させ、リクエストの応答時間を短縮できます。

Next.js を学ぶ一覧へ