How I Built a 2,600-Page Walkthrough Index with Next.js and Vercel

The Idea

My friend got stuck on level 87 of Color Block Jam, a casual puzzle game on mobile. She typed "Color Block Jam level 87" into Google and got a messy results page — some random YouTube links, a couple of forum threads, nothing clean.

So I built colorblockjam.wiki — a walkthrough index that maps every level number to the most relevant YouTube walkthrough video. No accounts, no ads, no scrolling past blog intros. Type a number, watch the solution.

The Numbers

• 2,611 static pages, one per level
• 27 level-range chapters (1-100, 101-200, etc.)
• ~7 MB total build output — tiny enough that Vercel's free tier barely notices
• Build time: under 2 minutes for all pages

Tech Choices

Next.js App Router + Static Export

Every page is a static route under /level/[id]. Since there are no user accounts and no dynamic data, I could have gone fully static HTML. But Next.js gave me a few things that made it worth it:

// app/level/[id]/page.tsx
export async function generateStaticParams() {
  return levels.map((level) => ({ id: level.levelId.toString() }));
}

generateStaticParams outputs 2,611 static HTML files. No ISR, no SSR — just pre-built pages deployed to Vercel's edge.

The Level Data Structure

The content is a single TypeScript array. Each level has:

• levelId — the level number
• slug — /level/N
• youtubeVideoId — matched to the best available walkthrough
• chapter — which range it belongs to (for browsing)

Keeping data in a source file instead of a CMS meant zero overhead during the build and zero runtime lookups.

SEO by Default

Since every page is a static file with its own <title> and <meta>, Google sees 2,611 unique pages — not a thin-content wall. Each page gets:

export const metadata = {
  title: `Color Block Jam Level ${levelId} Walkthrough`,
  description: `Watch the walkthrough solution for Color Block Jam level ${levelId} and get back to your puzzle.`,
  alternates: { canonical: `/level/${levelId}` },
};

Plus a VideoObject schema on each level page so Google can surface the embedded walkthrough in search results.

The Game Frame

One fun addition: I embedded the actual game using an iframe with allow="autoplay". Visitors can try the puzzle directly on the site, then switch to a walkthrough when they get stuck. It's not core to the SEO play, but it keeps people on the page longer — a signal Google notices.

Deployment

• Hosting: Vercel (free tier)
• Domain: Spaceship DNS → Vercel custom domain
• Build: next build && next export
• Monitoring: GA4 + Google Search Console

Vercel's custom domain setup with automatic SSL took about 5 minutes. The whole deployment pipeline — push to main, automatic build, deploy to edge — just works.

What I'd Do Differently

1. Start with GSC from minute one. I waited a day before submitting the sitemap. For a new domain with 2,600+ pages, every hour counts.
2. Add more original content earlier. Pure video embeds work for the long-tail, but pages with notes about tricky mechanics will rank better.
3. Build the link-building pipeline before launch. Getting backlinks to 2,600 pages takes planning, not afterthought.

The Stack at a Glance

Layer	Choice
Framework	Next.js 14 (App Router)
Hosting	Vercel
Data	TypeScript source files
Analytics	GA4
Monitoring	Google Search Console

Why I'm Writing This

Building small, focused tools for niche audiences is the most fun kind of development. No auth, no database, no API routes — just content and speed. If you're thinking about building a similar index for a game, a book, a film series, or anything with numbered entries, this stack works well.

Check out the site at colorblockjam.wiki. Feedback welcome.