I built a Serverless Real-Time Multiplayer Game (Next.js + Firebase) 🚀

Hey DEV community! 👋 I just hit a massive milestone on a side project I've been grinding on: I officially published 51 fully playable browser games on my arcade site, 7x.games . To celebrate, I wanted game #51 to be special, so I built a Real-Time 1v1 2048 Multiplayer Battle . Here is how I pulled off real-time multiplayer state syncing using a serverless frontend architecture: The Stack: Framework: Next.js (App Router) Styling: Tailwind CSS (heavy use of neon box-shadows!) Hosting: Vercel Multiplayer Backend: Firebase Realtime Database The Matchmaking Architecture Trick: Vercel serverless functions aren't built for persistent WebSockets, so I offloaded the game state syncing entirely to Firebase. The biggest risk with this setup is "Ghost Rooms"—players closing their tabs while waiting in a lobby, leaving junk data that clutters the database over time. To fix this, I used Firebase's onDisconnect().remove() rule. It attaches a heartbeat to the user's browser, and the moment they close