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 }));
}

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

Dynamic Metadata

Combine with generateMetadata for SEO:

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPublishedPostBySlug(slug);
  return { 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 };
}

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