Next.js vs. Remix: Analyzing Key Aspects and Differences

Know which one is right for you by comparing the latest versions of Remix and Next.js

Image by Author

The React web-based ecosystem is looking better by the day. At the end of 2021, Next.js launched its great 12 release. It was packed with lots of features and optimizations. However, a little after, we saw how Remix unveiled its latest version. The Remix team changed its strategy and decided to be free and open-source.

So when starting a project in 2022 which one should we pick? It is a hard choice to make and has a big impact on your web application. Each framework is opinionated and will shape how you think and build your components.

In this article, we will analyze what is the key aspect of each and by the end, you will be able to decide if those fit you. Some aspects might be deal-breakers or decisive factors. It all boils down to your use case and personal preferences.

In this paradox of choice just be reassured by knowing that both are great frameworks and you can’t go wrong with either of them.

Architecture and Philosophy

The Next.js framework is built on top of NodeJs. It is highly bound to the React ecosystem making it nearly an extension of it. It tries to embrace early on its latest features. The Vercel team works closely with the React one in order to make that happen. They mostly provide abstractions built on top of React components like: next/dynamic, next/head, next/link, …

Their latest release already includes support for:

• React server-side components: stateless components that are rendered in the server and streamed to the client.
• HTML server-side streaming: progressively ship HTML to the browser.

You can enable both features in the configuration file:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
}

The approach from the Remix is noticeably different. They are more decoupled from the React Ecosystem and keener on waiting for stable React features. It is built on the Web Fetch Api (instead of Node) which…