DEV Community: Sabih

Solving Next.js Route Refresh Issues on Firebase Hosting

Sabih — Sat, 21 Jun 2025 20:33:37 +0000

Solving Next.js Route Refresh Issues on Firebase Hosting

Sabih ・ Jun 20

Solving Next.js Route Refresh Issues on Firebase Hosting

Sabih — Fri, 20 Jun 2025 16:38:44 +0000

Why I Rebuilt My Routing System in Production?
While deploying a Next.js web app to Firebase Hosting, I encountered a frustrating and production-breaking issue:

Refreshing dynamic routes like /page/[id] would consistently throw 404 errors.

This happened despite the app working perfectly in local dev mode. Once hosted on Firebase (with its default static SPA setup), navigating directly to a dynamic route — or refreshing it — failed hard.

Debugging the Issue
Firebase Hosting serves static assets, and unless you’re using Cloud Functions or configuring complex rewrites, it doesn't know how to resolve dynamic paths like /page/123.

Even with attempts at rewrites in firebase.json, I realized the setup was too brittle for a smooth production experience.

My Solution: Switch to Query-Based Routing
Instead of relying on Next.js’s dynamic route folders ([id].tsx), I made a structural change:

diff
Copy
Edit

/pages/page/[id].tsx
/pages/page.tsx ➝ /page?id=123 Now all route parameters are passed via query strings, like:
- /page?id=123
- /profile?uid=abc

The Results

No more 404s when refreshing a dynamic route
Firebase SPA hosting (/index.html) works perfectly
No need to deploy Cloud Functions or SSR handlers

Faster, more predictable deployments

What Did I Give Up?
Pretty URLs like /page/123 are definitely nicer. But when weighed against:

Production stability
Faster iteration
Fewer moving parts

...the choice was clear for my use case. UX and reliability beat aesthetics.

Key Takeaway
If you’re deploying a static or hybrid Next.js app on Firebase Hosting and running into 404s on refresh:

Query-based routing might be the hidden fix you didn’t know you needed.

Sometimes, a small change in routing can unblock an entire launch.
Let me know if you’ve faced the same issue — and what your workaround was! I’d love to hear how others tackled this.

From scratch to scale — how I built a modern gaming web app with React + Firebase and lessons I learned

Sabih — Wed, 28 May 2025 00:40:27 +0000

Sabih

May 27 '25

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

#showdev #react #nextjs #firebase

Comments

2 min read

Showcasing The Gamer Bros: my full-stack gaming review app built solo with real-time features, SEO, and more 🎮

Sabih — Wed, 28 May 2025 00:39:49 +0000

Sabih

May 27 '25

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

#showdev #react #nextjs #firebase

Comments

2 min read

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

Sabih — Tue, 27 May 2025 20:31:19 +0000

Ever wondered what it takes to build a gaming reviewing platform — but solo?

Over the past 2 years, I designed and developed The Gamer Bros, a full-stack gaming hub where users can:

Create their own gaming profiles.
Write reviews for any PC or console game.
Wishlist titles they want to play.
Participate in threaded forum discussions.

This was more than a side project — it was a deep dive into scaling modern web apps using React, Next.js, Firebase, and Redux.

Tech Stack Overview

Frontend: React.js + Next.js for SEO and performance
State Management: Redux Toolkit
UI Library: Material UI (MUI)
Backend: Firebase (Firestore, Auth, Cloud Functions)
Hosting: Firebase Hosting + Vercel for hybrid routes

Key Features

Dynamic game profiles with wishlist, library, and progress tracking.
Rich-text reviews with rating, spoilers toggle, and shareable links.
Threaded comments like Reddit — infinitely nested.
Responsive design tested across multiple browsers/devices.

Biggest Challenges

Real-time scaling with Firestore

Optimizing query performance and paginating large game libraries without hitting read limits.

Nested comment rendering

Creating an expandable threaded forum structure using recursion while maintaining speed and readability.

Dynamic SEO meta rendering

Implementing dynamic

tags for review pages using next/head for better discoverability.

User state management

Syncing real-time auth, game data, and profile info with Redux and Firebase listeners — without breaking hydration in SSR.

Try it yourself

The Gamer Broz website
Check out the platform live — browse reviews, wishlist games, or create a gaming profile.

DEV Community: Sabih

Solving Next.js Route Refresh Issues on Firebase Hosting

Solving Next.js Route Refresh Issues on Firebase Hosting

Sabih ・ Jun 20

Solving Next.js Route Refresh Issues on Firebase Hosting

From scratch to scale — how I built a modern gaming web app with React + Firebase and lessons I learned

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

Showcasing The Gamer Bros: my full-stack gaming review app built solo with real-time features, SEO, and more 🎮

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

I Built a Scalable Gaming Review Platform with React, Next.js & Firebase

Tech Stack Overview

Key Features

Biggest Challenges

Real-time scaling with Firestore

Nested comment rendering

Dynamic SEO meta rendering

User state management

Try it yourself

Screenshots from the website

User Profile Dashboard

Game Details Page

Game Review Writing Page

Game Search Page