DEV Community

Yunhan
Yunhan

Posted on

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

#nextjs #webdev #javascript #seo

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:

  1. Name pages (/name/[slug]) — one per name (1,500+)
  2. Origin pages (/origin/[origin]) — one per origin (30+)
  3. Style pages (/style/[style]) — one per style tag (20+)
  4. 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, -)
  }))
}
Enter fullscreen mode Exit fullscreen mode

For origin pages:

// app/origin/[origin]/page.tsx
export async function generateStaticParams() {
  const origins = getUniqueOrigins()
  return origins.map((origin) => ({ origin }))
}
Enter fullscreen mode Exit fullscreen mode

Performance Numbers

  • Build time: ~90 seconds for 3,500 pages
  • Page size: ~15KB average (HTML + minimal JS)
  • Lighthouse score: 95+ across the board
  • TTFB: <100ms (served from Vercel edge)

SEO Benefits

Each pre-rendered page gets:

  • Unique <title> and <meta description>
  • Structured data (JSON-LD) for the name
  • Internal links to related names, same origin, same style
  • Canonical URL
  • Open Graph tags

This means Google can crawl and index every page instantly — no JavaScript rendering needed.

The Sitemap

We generate a dynamic sitemap at /sitemap.xml that includes all 3,500+ URLs with proper lastmod dates. Google Search Console shows steady indexing growth since launch.

Tips for Large Static Sites

  1. Keep your data source simple — a single JSON file beats a database for <10K pages
  2. Use ISR as a fallback — revalidate: 86400 catches any pages missed during build
  3. Monitor build times — they grow linearly with page count
  4. Optimize images at build time — don't rely on runtime optimization for static pages
  5. Use generateMetadata — dynamic meta tags are crucial for SEO

What's Next

We're heading toward 2,000 names and 5,000+ pages. The architecture scales well — adding a name is just adding a JSON object, and the build system handles the rest.

Check it out: babynamepick.com

Building a baby name site in public. More posts on SEO, Next.js, and indie hacking coming soon.

Top comments (0)