← Back

generateStaticParams

Pre-render dynamic routes, generateMetadata for SEO, on-demand generation for new slugs.

PublishedMarch 5, 2026116 words
Edit

generateStaticParams

generateStaticParams pre-renders dynamic routes at build time—instant page loads, no loading states.

Basic Usage

From app/[slug]/page.tsx:

export async function generateStaticParams() { const posts = await getPublishedPosts(); return posts.map(post => ({ slug: post.slug })); } export default async function BlogPostPage({ params }) { const { slug } = await params; const post = await getPublishedPostBySlug(slug); return <MarkdownContent>{post.content}</MarkdownContent>; }
export async function generateStaticParams() { const posts = await getPublishedPosts(); return posts.map(post => ({ slug: post.slug }))

Dynamic Metadata

Combine with generateMetadata for SEO:

export async function generateMetadata({ params }) { const { slug } = await params; const post = await getPublishedPostBySlug(slug); return

New slugs not in generateStaticParams are generated on-demand and cached. Use updateTag() to invalidate when content changes.

;
}
export
default
async
function
BlogPostPage
(
{
params
}
)
{
const
{
slug
}
=
await
params
;
const
post
=
await
getPublishedPostBySlug
(
slug
)
;
return
<
MarkdownContent
>
{
post
.
content
}
</
MarkdownContent
>
;
}
{
title
:
post
.
title
,
description
:
post
.
description
}
;
}
export async function generateMetadata({ params }) { const { slug } = await params; const post = await getPublishedPostBySlug(slug); return { title: post.title, description: post.description }; }