The latest articles on DEV Community by anil34anil (@anil34anil). https://dev.to/anil34anil https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4014218%2Fa3a3d667-4400-45ed-b175-04fc439efcbf.png https://dev.to/anil34anil en anil34anil Fri, 03 Jul 2026 23:07:20 +0000 https://dev.to/anil34anil/how-i-built-a-6000-game-web-portal-with-nextjs-14-and-kept-hosting-nearly-free-2n3n https://dev.to/anil34anil/how-i-built-a-6000-game-web-portal-with-nextjs-14-and-kept-hosting-nearly-free-2n3n <p>I recently launched <a href="https://www.oynava.com" rel="noopener noreferrer">OYNAVA</a>, a free HTML5 game portal with 6,000+ games. Here's the architecture, the cost traps I hit in production, and how I fixed them. If you're building a content-heavy site, a few of these will probably bite you too.</p> <h2> The stack </h2> <ul> <li> <strong>Next.js 14 (App Router)</strong> + TypeScript + Tailwind</li> <li>Game feeds: GameMonetize, GamePix, GameDistribution (merged + normalized into one catalog)</li> <li> <strong>Redis</strong> for shared likes/plays counters</li> <li>Hosting: Netlify (after migrating off Vercel — more on that below)</li> </ul> <h2> Lesson 1: dynamic SSR quietly eats your free tier </h2> <p>My i18n read the locale from <code>headers()</code>, which forced <strong>every</strong> page to render dynamically (<code>ƒ</code>). Every request hit the origin, and Vercel's "Fast Origin Transfer" quota (10 GB) filled in days.</p> <p><strong>Fix:</strong> make content pages static/ISR with <code>export const revalidate = 3600</code> + <code>generateStaticParams</code>, and move locale to URL prefixes with client-side chrome translation. Origin transfer dropped to almost zero.</p> <h2> Lesson 2: the client-side N+1 </h2> <p>Every game card fetched its like-count individually — ~180 requests on a single homepage view. That maxed out serverless CPU.</p> <p><strong>Fix:</strong> an 80 ms client-side batcher that collapses them into one <code>/api/likes/batch</code> call. Then I went further and removed live counts from cards completely — they only matter on the detail page.</p> <h2> Lesson 3: node-redis + a full database = silent failure </h2> <p>Two things bit me at once:</p> <ol> <li>Persistent TCP connections (node-redis) are fragile in serverless.</li> <li>My free 30 MB Redis silently filled up. With <code>noeviction</code>, <strong>writes were rejected but reads looked fine</strong> — so likes "worked" in dev and silently failed in prod.</li> </ol> <p><strong>Fix:</strong> TTLs on cache keys (a translation cache was the culprit), plus an admin cleanup endpoint. Lesson: always give cache keys a TTL.</p> <h2> Programmatic SEO at scale </h2> <ul> <li>~60 curated collection pages (<code>/en-iyi-araba-oyunlari</code>, <code>/ates-ve-su-oyunlari</code> …)</li> <li>~480 tag landing pages generated from game metadata, with a min-games threshold and <code>noindex</code> for thin ones</li> <li> <code>VideoGame</code> / <code>FAQPage</code> / <code>ItemList</code> JSON-LD everywhere</li> <li>One sitemap with ~7,000 URLs</li> </ul> <h2> Lesson 4: don't advertise duplicate hreflang </h2> <p>After I reverted server-side translation, all locale URLs served identical Turkish content — but I was still emitting hreflang for 8 languages. Google discovered <strong>8× duplicate URLs</strong> and wasted crawl budget on them instead of indexing the real pages. Removing hreflang (canonical only) refocused the crawler.</p> <h2> PWA → Google Play </h2> <p>The site is a PWA (manifest + service worker), packaged as a TWA with PWABuilder and shipped to Google Play. One codebase, and web deploys update the app instantly — no store release needed.</p> <p>If you want to poke at the result, it's live at <strong><a href="https://www.oynava.com" rel="noopener noreferrer">oynava.com</a></strong>. Happy to answer questions about any of these in the comments. 🎮</p> nextjs webdev seo sidehustle