Over the course of this series, I’ve built the same project, TartarusInsight.com, twice. Once with Next.js and once with React Router v7 (Remix). Exploring everything from fonts and routing to layouts, UI, and deployment. Here’s what I’ve learned.
Fonts & Assets
Next.js has a polished, built-in way to handle Google Fonts, backed by excellent documentation. React Router takes a more classic approach, which I found more flexible and made it easier to add other providers besides Google Fonts, like Bunny Fonts. Using a non-Google provider in Next.js is doable but requires extra manual steps.
Home Page Structure
At the early stages, both frameworks felt almost identical. I built a single homepage split into components, and both handled it just fine. The differences in folder organization for the components were entirely due to my personal choices; neither framework enforces a strict structure here.
Layouts & Navigation
This was the biggest architectural difference.
- Next.js: Opinionated, convention-driven, and predictable. Your file structure dictates routing and layouts automatically.
- React Router: Fully configurable by default, but also offers an optional convention-based package (
@react-router/fs-routes
) if you want something more Next.js-like.
I appreciated the flexibility of React Router here, but I can also see how that freedom could overwhelm beginners.
UI Development Experience
Once the routing and structure were in place, the coding experience was similar. Components, hooks, and styling worked almost identically in both. The hardest part wasn’t switching frameworks. It was transforming the original static HTML/CSS/JS into modern React components.
Deployment
Self-hosting either framework is straightforward with tools like Coolify. Almost as easy as Vercel. Manual deployment or Docker setups take more effort, and Next.js in particular can be trickier for beginners. Still, going through a manual deployment at least once is worth it for the learning experience.
Final Verdict
There’s no clear “winner” here!
Personally, I leaned toward React Router for its flexibility.
- Choose Next.js if you are new to programming. Next.js has great documentation, and there are plenty of resources available to help you quickly find solutions to most problems you may encounter. Using AI tools can also be very helpful here.
- Choose React Router if you want flexibility. It also has solid documentation, but if you’re a beginner, you may have a harder time finding solutions. Additionally, most AI tools aren’t yet updated to know about React Router v7.
Leave a Reply