DEV Community

Yunhan
Yunhan

Posted on • Originally published at babynamepick.com

How We Built Individual Name Pages for 2,800+ Baby Names (Next.js + SEO)

#nextjs #seo #react #webdev

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
Enter fullscreen mode Exit fullscreen mode

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) }));
}
Enter fullscreen mode Exit fullscreen mode

This generates 2,300+ unique static pages. Vercel handles the build beautifully — each page is a static HTML file served from the edge.

SEO Metadata Per Page

Every name page gets unique metadata:

export async function generateMetadata({ params }) {
  const name = findNameBySlug(slug);
  return {
    title: `${name.name}: Meaning, Origin & Popularity | BabyNamePick`,
    description: `Discover the meaning of ${name.name}...`,
    alternates: { canonical: `https://babynamepick.com/name/${slug}` },
  };
}
Enter fullscreen mode Exit fullscreen mode

Schema.org Structured Data

Each page includes JSON-LD for rich search results:

  • BreadcrumbList — Home > Greek Names > Theodore
  • Article schema with name meaning content

Internal Linking Strategy

The real power comes from internal links:

  1. Name cards link to detail pages — Every name shown anywhere on the site links to its /name/ page
  2. Detail pages link to category pages — "Theodore" links to "Greek Names"
  3. Related names section — Each page shows 8 related names with links

This creates a dense internal link graph that search engines love.

Results

Our sitemap went from 130 URLs to 2,988 URLs overnight. That's a 23x increase in indexable pages.

Each page targets long-tail queries like:

  • "[name] meaning"
  • "what does [name] mean"
  • "[name] origin"
  • "[name] baby name"

These are low-competition, high-intent queries — exactly what a new site needs.

Try It Out

Check out some examples:

If you're building a content-heavy Next.js site, individual detail pages for each entity in your dataset is one of the highest-ROI SEO moves you can make.

Building BabyNamePick.com — a free baby name discovery tool with 2,800+ names, 50 categories, and 50+ blog posts.

Top comments (0)