Generate static paths for dynamic routes. Pre-render [slug] or [id] pages.
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await fetch('https://api.example.com/posts').then((r) => r.json());
return posts.map((post: { slug: string }) => ({ slug: post.slug }));
}
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const post = await fetchPost(slug);
return <article>{post.title}</article>;
}
Export from a dynamic route page. Return an array of objects whose keys match the dynamic segment (e.g. slug, id). Next builds those at build time.
Paths not returned are generated on demand (or 404 if not using fallback). Use for known slugs from CMS or DB.
return [{ slug: 'hello' }, { slug: 'world' }];