Yunhan

Posted on Mar 18 • Originally published at babynamepick.com

How I Built a Baby Name Generator With 1,200+ Names Using Next.js and Zero APIs

#nextjs #javascript #webdev #seo

Most baby name sites are slow, bloated with ads, and built on decade-old WordPress templates. I wanted to build something better — fast, beautiful, and genuinely useful.

Here's how I built BabyNamePick with Next.js, static generation, and a hand-curated database of 1,200+ names.

The Architecture: Stupidly Simple

No database. No API. No CMS. Just:

A single names.json file (1,200+ entries)
Next.js App Router with generateStaticParams
Vercel for hosting

Every name gets its own statically generated page at build time. Every category page, every letter page, every blog post — all pre-rendered HTML.

Why this works: Google loves fast, static HTML. Our pages load in under 1 second, and Core Web Vitals are green across the board.

The Data Model

Each name entry looks like this:

{
  "name": "Elara",
  "meaning": "Shining light",
  "gender": "girl",
  "origin": "greek",
  "style": ["mythological", "celestial"],
  "popularity": "rising",
  "startLetter": "E"
}

Simple, flat, and fast to filter. No relational complexity needed.

The style array is where it gets interesting — a single name can be "nature" AND "mythological" AND "unique", which lets users discover names through multiple paths.

SEO Strategy: Pages Are Entry Points

The key insight: every page is a potential Google entry point.

We generate pages for:

/name/[slug] — 1,200+ individual name pages
/[category] — 50+ category pages (boy-names, nature-names, celtic-names...)
/letter/[letter] — 26 letter pages
/blog/[slug] — 85+ long-form blog posts
/browse — the main discovery page

That's 3,300+ URLs in our sitemap, each targeting different search intents:

/name/elara → "elara name meaning"
/celtic-names → "celtic baby names"
/blog/nordic-baby-names-guide → "nordic baby names"

The Blog Posts: Content Is King

Our blog has 85+ posts, each 2,000-8,000 words of genuine, well-researched content. Not AI slop — real guides with cultural context, pronunciation tips, and curated name lists.

Blog posts are stored as TypeScript objects in a single file. No markdown parsing, no CMS overhead:

export const posts: BlogPost[] = [
  {
    slug: "celtic-baby-names-guide",
    title: "45 Enchanting Celtic Baby Names...",
    content: `...`, // Full content as a string
    relatedSlugs: ["nordic-baby-names-guide", ...],
  },
];

Each post links to relevant category pages and name pages, creating a dense internal linking structure that Google rewards.

Performance: Under 1 Second

Static generation means:

No server-side rendering at request time
No database queries per page view
CDN-cached globally via Vercel's edge network

Lighthouse scores: 95+ across all categories. This matters for SEO — Google's page experience signals directly impact rankings.

What I'd Do Differently

Start with more names. We launched with ~500 and have grown to 1,200+. Having more data from day one would have meant more indexable pages earlier.
Add structured data sooner. FAQ schema on category pages improved our search appearance significantly.
Blog earlier and more aggressively. Long-form content targeting specific keywords (like "hawaiian baby names" or "names meaning light") drives the most organic traffic.

Results So Far

After 25 days:

3,300+ URLs in sitemap
85+ blog posts
Indexing across Google
Growing organic impressions daily

The total cost? $0/month (Vercel free tier handles the traffic easily).

Try It

Check out BabyNamePick — browse by origin, explore categories, or read our name guides.

The source approach is simple: great content, fast pages, and letting Google do the rest.

Building something similar? I'm happy to answer questions in the comments.

DEV Community