DEV Community

Yunhan
Yunhan

Posted on

Building a Free AI Baby Name Generator with Next.js and Static Site Generation

#nextjs #seo #ai

Choosing a baby name is one of the most exciting (and stressful) decisions new parents face. I built BabyNamePick.com — a free AI-powered baby name generator — to help parents discover the perfect name. Here's how I built it with Next.js and why I chose static site generation over server-side rendering.

Why I Built This

Most baby name sites are cluttered with ads and outdated databases. I wanted something clean, fast, and actually useful — a tool that suggests names based on origin, meaning, and style preferences.

Tech Stack

  • Next.js 16 with App Router
  • TypeScript for type safety
  • Tailwind CSS v4 for styling
  • Vercel for deployment
  • Cloudflare for DNS and CDN

The Architecture: Static Over Dynamic

Instead of calling an AI API on every request (expensive and slow), I built a curated name database with 200+ names across 19 categories:

// categoryData.ts - Each category has its own rich dataset
export const categories = {
  'boy-names': {
    title: 'Boy Names',
    description: 'Popular and unique boy names...',
    names: [
      { name: 'Liam', origin: 'Irish', meaning: 'Strong-willed warrior' },
      { name: 'Noah', origin: 'Hebrew', meaning: 'Rest, comfort' },
      // ... 200+ names
    ]
  },
  'girl-names': { ... },
  'japanese-names': { ... },
  'french-names': { ... },
  // 19 categories total
};
Enter fullscreen mode Exit fullscreen mode

Dynamic Routes with generateStaticParams

The magic is in Next.js's generateStaticParams. One template generates 19 SEO-optimized pages at build time:

// app/[category]/page.tsx
export async function generateStaticParams() {
  return Object.keys(categories).map((category) => ({
    category,
  }));
}

export async function generateMetadata({ params }) {
  const data = categories[params.category];
  return {
    title: `${data.title} - AI Baby Name Generator`,
    description: data.description,
    openGraph: { ... },
  };
}
Enter fullscreen mode Exit fullscreen mode

This gives us:

  • 19 static HTML pages — instant load times
  • Unique meta tags per category — great for SEO
  • Zero runtime cost — no API calls, no database queries

SEO Strategy That Works

After 18 days live, here are the results:

  • 90 Google impressions across multiple keywords
  • 4 pages indexed by Google (and growing)
  • 2 organic clicks — small but real traffic

What worked:

  1. Structured data (FAQ + Breadcrumb schema) on every page
  2. Dynamic sitemap generated from the categories array
  3. Blog content — 5 SEO-focused articles about baby naming
  4. Category pages targeting long-tail keywords like "french baby names" and "biblical baby names"

Key Takeaway

You don't always need a real-time AI API. For many use cases, a well-curated database with smart categorization delivers a better user experience — faster, cheaper, and more reliable.

Check it out: babynamepick.com

What's your approach to building SEO-friendly tools? I'd love to hear about your experiences in the comments!

Top comments (0)