How We Built a Gaming Portal with 8,000+ Games Using Next.js and 38-Language Translation

Source: Dev.to

The Stack

• Framework: Next.js 16 with App Router
• Database: Neon PostgreSQL with Prisma 7 ORM
• Hosting: DigitalOcean VPS + Cloudflare CDN
• Image CDN: Custom nginx‑based CDN (img.sonsaur.com) serving pre‑resized AVIF thumbnails
• Search: PostgreSQL trigram indexes (pg_trgm) for fuzzy game search
• AI Translation: Gemini API with 60‑key rotation for rate‑limit management
• Process Manager: PM2 with auto‑restart and memory limits

The Image CDN Challenge

With 8,000+ games, each needing thumbnails, image optimization was critical. We built a custom image pipeline:

• Original images stored as AVIF at 512 px
• Pre‑resized to 128 px (~6 KB) and 256 px (~13 KB) variants
• Served via dedicated nginx subdomain (img.sonsaur.com)
• Zero‑JavaScript image components (plain “ tags for zero hydration cost)

Result: 84 % reduction in image payload for game cards.

Translating 8,000 Games into 38 Languages

This was the most interesting challenge. We needed to translate not just the UI (handled with next-intl) but also game‑specific content: descriptions, how‑to‑play guides, tips, and FAQs.

Our approach:

• 60 Gemini API keys distributed across multiple projects
• Cron job running every 2 minutes, processing 60 games per batch (1 per key)
• Sequential processing to prevent Node.js streaming crashes
• 2‑minute key cooldown with a 10‑minute pause when all keys are exhausted
• Tier 1 rate limits: 1,500 requests per day per key per project

At full capacity, we translate ~43,200 game pages per day across all languages.

Performance Results

• Lighthouse: Performance 79, Accessibility 93, Best Practices 100, SEO 100
• First game load: under 3 seconds
• Subsequent navigations: near‑instant (Next.js prefetching)
• Image CDN: 128 px thumbnails average 6 KB (vs 34 KB originals)

What’s Next

• Native Android and iOS apps
• Completing full translation coverage for all 38 languages
• Continuously adding new games to the library

Check it out: sonsaur.com

Happy to answer questions about any part of the stack. The combination of Next.js + Neon PostgreSQL + custom image CDN has been great for this use case.