Why We Migrated from Remix to Next.js: Embracing the Future of React

In the rapidly evolving world of web development, choosing the right framework is a critical decision that impacts not just your developer experience, but also your application's security and scalability. Recently, we made the significant decision to move our project from Remix to Next.js. While Remix is a powerful framework with a unique approach to web standards, our transition was driven by several core advantages offered by the Next.js ecosystem in the era of React 18 and 19.

Native React Server Components (RSC) Support

The most significant driver for our move was the mature implementation of React Server Components in Next.js's App Router. While Remix has its own approach to server-side code through loaders and actions, Next.js provides a more granular and integrated way to build with RSCs.

By leveraging Server Components by default, we can:

• Minimise Client-Side JavaScript: Only the necessary interactive components are hydrated on the client, significantly improving PageSpeed scores and mobile performance.
• Direct Data Access: Fetching data directly within the component that needs it, rather than passing it down through multiple levels from a route loader, leads to much cleaner and more maintainable code.
  

Streamlined Metadata Management

Next.js's Metadata API is a game-changer for SEO and social sharing. In our Remix setup, managing meta tags across nested routes often felt more complex than it needed to be.

The Next.js Metadata API provides a centralised, type-safe, and highly flexible way to define titles, descriptions, and OpenGraph tags. Whether it's static metadata in `layout.tsx` or dynamic SEO generation in `generateMetadata`, the workflow is intuitive and perfectly aligned with the component hierarchy.

Integrated Image Optimisation

Images are often the heaviest part of a web page. Next.js's `next/image` component provides built-in, automated image optimisation that is difficult to replicate with the same level of ease in other frameworks. It handles:

• Resizing and Compression: Serving correctly sized images based on the user's viewport.
• Modern Formats: Automatically serving WebP or AVIF when supported.
• Visual Stability: Preventing layout shifts (CLS) automatically by requiring dimensions or using `fill`.

For a media-heavy site like ours, this led to immediate performance gains without requiring external services or complex custom processing.

Ecosystem & Tooling Maturity

The Next.js ecosystem is vast. From specialised UI libraries like Mantine (which we use) to data fetching utilities and specialised middleware, the level of community support and documentation is unparalleled. During our migration, we found that most modern React tools are "Next.js first," meaning integration is often a matter of following a single page in the documentation rather than building custom adapters.

The Migration Journey

Moving away from a framework you've invested in is never easy, but the transition to Next.js allowed us to modernize our stack fundamentally. We've simplified our data flow, improved our lighthouse scores, and created a more scalable foundation for the future.

If you find yourself hitting framework-level walls, whether it's regarding performance, SEO management, or asset optimisation, don't be afraid to evaluate the alternatives. For us, the shift to Next.js was a move toward a more efficient, developer-friendly, and performant future.