How I Built a 108-Page SEO Matrix with Next.js Dynamic Routes

#webdev #nextjs #seo #tutorial

When I decided to launch an AI fortune telling website, I knew SEO was the only affordable traffic strategy for a solo developer with $0 marketing budget.

The Problem

Fortune telling is competitive. Sites like AstroSeek and Cafe Astrology have been around for 20+ years. How do you compete?

Long-tail keywords. Instead of targeting "horoscope" (impossible to rank), I targeted every combination of sign + card + number.

The Matrix

My site covers:

12 Zodiac signs - 12 pages (each sign's personality, compatibility, career)
22 Major Arcana Tarot cards - 22 pages (upright + reversed meanings)
9 Numerology numbers - 9 pages (life path 1-9)
66 Zodiac compatibility pairs - 66 pages
Plus BaZi, Five Elements, Ten Gods pages

Total: 108 dynamically generated pages from a single codebase.

How It Works

// pages/zodiac/[sign].js
export async function getStaticPaths() {
  const signs = ['aries', 'taurus', 'gemini', /* ... */];
  return {
    paths: signs.map(sign => ({ params: { sign } })),
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const data = zodiacData[params.sign];
  return { props: { sign: params.sign, data } };
}