How We Built 26 SEO-Optimized Pages in 10 Minutes with Next.js

#seo #webdev #nextjs #javascript

How We Built 26 SEO-Optimized Pages in 10 Minutes with Next.js

Last week, we added 26 new pages to BabyNamePick.com — one for every letter of the alphabet. Each page has unique content, FAQ schema, internal navigation, and proper meta tags. Total development time? About 10 minutes.

Here's exactly how we did it with Next.js and programmatic SEO.

The Problem: Long-Tail Keywords at Scale

Our baby name site was getting impressions for queries like "baby names starting with A", "baby names starting with M", etc. These are classic long-tail keywords:

Lower competition than "baby names"
Higher intent (the user already has a letter in mind)
26 variations = 26 pages of organic traffic potential

But we needed each page to be genuinely useful — not thin content with just a filtered list.

The Solution: Dynamic Routes + Rich Data

Step 1: Create the Data Layer

We built a letterData.ts file with unique content for every letter:

const letterIntros: Record<string, { traits: string; famous: string; tips: string }> = {
  A: {
    traits: "Names beginning with A are among the most popular worldwide...",
    famous: "Alexander the Great, Audrey Hepburn, Aristotle...",
    tips: "A-names pair especially well with middle names starting with consonants..."
  },
  B: {
    traits: "B names carry a warm, approachable energy...",
    famous: "Benjamin Franklin, Beyoncé, Beethoven...",
    tips: "B-names flow beautifully with one-syllable middle names..."
  },
  // ... all 26 letters with unique content
};

Each letter gets its own personality, famous name-bearers, and practical naming tips. This isn't template garbage — it's genuine content that helps parents.

Step 2: Dynamic Route with Static Generation

app/
  letter/
    [letter]/
      page.tsx       # Template component
      letterData.ts   # 26 letters of unique content

The generateStaticParams function tells Next.js to build all 26 pages at compile time:

export function generateStaticParams() {
  return getAllLetters().map((letter) => ({
    letter: letter.toLowerCase(),
  }));
}

Step 3: Rich Content Per Page

Each generated page includes:

Unique H1 and meta description targeting "[letter]-names"
FAQ schema with 3 letter-specific questions (appears as rich results in Google)
Interactive letter navigation (A-Z bar linking all 26 pages)
Names filtered from our 555+ database, split into boy/girl/unisex sections
SEO text with cultural context and naming tips
Internal links to category pages and the homepage

Step 4: Internal Linking Hub

The letter navigation bar creates a natural hub-and-spoke structure:

<div className="flex flex-wrap gap-2">
  {letters.map((l) => (
    <Link
      key={l}
      href={\`/letter/\${l.toLowerCase()}\`}
      className={l === currentLetter ? "bg-pink-500 text-white" : "bg-gray-100"}
    >
      {l}
    </Link>
  ))}
</div>

Every letter page links to every other letter page. Google loves this because:

It can discover all 26 pages from any single page
Link equity flows evenly across the cluster
Users can easily browse between letters

The Results

After one git push:

26 new static pages generated automatically
76 total URLs in our sitemap (up from 50)
Each page has proper canonical tags, OG meta, and structured data
Build time: under 30 seconds for all pages

Key Lessons

Unique content matters more than quantity. Each letter page has genuinely different SEO text, not just a filtered list with the same wrapper.
FAQ schema is free real estate. Adding 3 relevant FAQs per page takes 5 minutes but can double your search result visibility.
Internal linking is structural SEO. Our mega footer + letter navigation means Google can find any page within 2 clicks of any other page.
Static generation is perfect for pSEO. All 26 pages are pre-rendered HTML — no JavaScript needed for content, which means perfect Core Web Vitals.