
How We Built Individual Name Pages for 2,800+ Baby Names (Next.js + SEO)
The Challenge When building BabyNamePick , we started with category pages like "Greek Names" and "Nature Names." But we quickly realized we were missing a massive SEO opportunity: individual name pages. Think about it — when someone searches "what does Theodore mean" or "Elara name meaning," they want a dedicated page, not a list of 50 names. The Architecture We're using Next.js 15 with the App Router. Here's how we structured individual name pages: app/ name/ [slug]/ page.tsx # Dynamic route nameUtils.ts # Helper functions Static Generation at Scale The key insight: use generateStaticParams() to pre-render all 2,800+ name pages at build time: export function generateStaticParams () { const slugs = new Set < string > (); return namePool . filter ( n => { const slug = nameToSlug ( n . name ); if ( slugs . has ( slug )) return false ; slugs . add ( slug ); return true ; }) . map ( n => ({ slug : nameToSlug ( n . name ) })); } This generates 2,300+ unique static pages. Vercel handles the
Continue reading on Dev.to React
Opens in a new tab



