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