jsschools

generateStaticParams()

Pre-renders dynamic routes at build time by enumerating their params.

Since Next 13 (App Router) Spec ↗

Syntax

export async function generateStaticParams() { return [{ slug: 'a' }] }

Returns

Promise<Array<Record<string, string>>> — List of param objects to statically generate.

Examples

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((p) => ({ slug: p.slug }))
}

export default async function Page({ params }) {
  const { slug } = await params
  return <Post slug={slug} />
}

// Catch-all: app/docs/[...path]/page.tsx
export async function generateStaticParams() {
  return [
    { path: ['getting-started'] },
    { path: ['guides', 'routing'] },
  ]
}

Notes

Replaces `getStaticPaths` from the Pages Router. Returned params are built at build time (SSG); unknown params are handled per `dynamicParams` (default `true` = render on-demand and cache). Combine with `revalidate` for ISR. Runs at build, so it can call your data layer directly.

See also