How We Use Next.js generateStaticParams to Pre-render 3,500 Baby Name Pages

When your site has 1,500+ baby names across 30 origins and dozens of styles, you need a smart approach to static generation. Here's how we use Next.js generateStaticParams to pre-render 3,500+ pages on BabyNamePick.com. The Page Structure Our site has three types of dynamic pages: Name pages (/name/[slug]) — one per name (1,500+) Origin pages (/origin/[origin]) — one per origin (30+) Style pages (/style/[style]) — one per style tag (20+) Blog posts (/blog/[slug]) — SEO content (85+) Plus static pages: homepage, about, search, categories. The Implementation // app/name/[slug]/page.tsx export async function generateStaticParams() { const names = getAllNames() // reads from data/names.json return names.map((name) => ({ slug: name.name.toLowerCase().replace(/\s+/g, -) })) } For origin pages: // app/origin/[origin]/page.tsx export async function generateStaticParams() { const origins = getUniqueOrigins() return origins.map((origin) => ({ origin })) } Performance Numbers Build time: ~9