Pre-generate Dynamic Routes with generateStaticParams

Next.js

React

JavaScript

Technical Specification

Use generateStaticParams to statically generate multiple dynamic pages at build time.

Input/Output Samples

Input:3 products

Output:3 statically generated pages

Optimal Logic Path

const products = ["laptop", "phone", "tablet"];

export function generateStaticParams() {
  return products.map((slug) => ({ slug }));
}

export default function ProductPage({ params }) {
  return <h1>{params.slug}</h1>;
}

Architectural Deep-Dive

generateStaticParams tells Next.js which dynamic paths to prebuild at build time.