Next.js nope - Remix and Astro.js yes!
var nextJs = new Error('Next.js is not for everything')
const astro = "Astro.js is just amazing period"
let remix = "I like Remix, lets keep improving it!"
for (let i = 0; i < 100; i++) {
console.log("let's use Astro and improve Remix for SPAs")
}
throw nextJs // Uncaught Error: Next.js is not for everything at <anonymous>:1:7
Edit: Next.js 15 is out, they adressed some pain points such as caching and self hosting but I still thing Next.js should not be the first choice for every project.
I am a big Next.js fan, really. I like how the Next.js and Vercel looks and feels. I like how they try to push boundries and rethink some established concepts especially in the frontend. But I have to say, the more I work with Next.js the more I doubt it's a one fits all solution. Actually I think Next.js is only for a nieche of projects. But let's start from the beginning.
What makes Next.js so unique?
There are a lot of things but let me point out the most important ones:
- 💰Money: Nextjs is heavily funded and it has a lot of resources for development. It was a strategically good move to make hosting Next.js the easiest on their own Infra
- ✨Innovation: it's on the bleeding edge of technology and they sometimes try to reinvent the wheel. Sometimes it works sometimes it doesn't
- 🖥️ RSC: React Server Components could be a game changer and Next.js is the first to implement them but its still buggy tbh
- 🚀Hype: Next.js is hyped a lot. This helps with resources and with the community
- 📦Ecosystem: Next.js has a vast ecosystem with lots of packages that work out of the box. Rapid development is possible
- 📈Performance: Next.js is faster than other Frameworks but not always. Most of it is due to React Server Components and how they handle Image Optimization out of the box
- 📚Documentation: Next.js has a fairly good documentation and there are lots of tutorials
What I love most about Next.js
I generally like working on the bleeding edge. It can be frustrating sometimes but when you get the hang of it, it's actually fun. Next.js has a lot of rough edges and sometimes something that worked always suddenly breaks without a reason. But having a light weight framework where you don't have to think alot about configuration and can add backend functions as you go is just amazing.
Also I like how Next.js solved the file based routing problem - and after seeing thousands of page.tsx
and route.tsx
I kinda got used to working with it. (You have to CMD+P <route>page.tsx
a lot in Next.js)
How Vercel tries to reinvent the wheel and sometimes fails
Bleeding edge can make you bleed. Vercel sometimes tries to reinvent the wheel for reasons I can't understand.
And when they fail to deliver they are too stubborn to admit and move on with community standards.
I mainly think of Turbopack
and ISR
. We have vite and we have SWR and I don't see the point there.
Vercel sells alpha as stable
It's clear by know that Vercel uses "stable" differently to the rest of us. They build their whole framwork on canary versions of React, they even hire React core devs and then they try to sell it as stable. It's fine to work with canary versions but don't sell it as stable. It's not. Your compiler knows its not, your terminal yells at you with random errors no one understands. That is a good indication that this should not be called stable.
Framework vs Infrastructure
Next.js is more of an infrastructure+framework package than a plain framework. Controlling the Framework and the infrastructure gives Vercel a lot of ways to innovate and move fast. They can implement on the infrastructure level and the framework level. But this also means if you can't host on Vercel or you can't afford the 💰💰💰 hosting costs you kind of loose the benefits of Next.js and have to live with all the downsides of a complex framework. If you can't host on Vercel and you can't afford to hire a devops team to reverse engineer the Vercel infrastructure you should not use Next.js. Try Remix or Astro.js instead, really!
What I would use Next.js for
Let's get to the point.
For small to medium sized projects where development does not require a lot of hot module reloading
and you can for sure host on Vercel. If you can not host on Vercel or you would like to use hot module reloading for fast UI development, I would not recommend Next.js. Also if you are not a fan of the file based routing () page.tsx
and route.tsx
everywhere) I would not recommend Next.js. Use Astro or Remix instead.
Just because it's new doesn't mean it's better
The web has been around for a very long time and there are ways to build webapps even without Reactjs, even if it hurts to say that. Next.js is such a nieche way of building fullstack web apps that it seems silly to promote it as the goto way of building for the web. If you don't have a lot of pages or a lot of interactivity on your site, you should really consider working with simpler stacks. Also if React + Next.js is the only way you know, you should really try out some other frameworks.
What Remix does better
Remix first of all is the extension of react-router-dom
and these guys are React OGs. But lets focus on the things Remix does better than Next.js:
- 📺Web Standards: Remix is more focused on web standards and tries to be more compatible with universal web standards. If you used another web framework before you will understand everything in Remix. In Next.js you have to learn a lot of Next.js specific things that don't transfer to other frameworks
- 🚀Hot Module Reloading: Remix embraced Vite and Vite is very fast. When working for hundreds of hours on a project, you will appreciate the speed of Vite
- 🗺️Ease of use: Remix is just so much easier to use and understand than Next.js. No need to study the documentation
- 🚑Stability: Remix is rock solid and you can rely on it. No random breaking changes, no cryptic error messages.
- ⚡️Performance: Remix can be faster than Next.js in production
- ✨Without Magic: Remix is just plain React and it's easy to understand what's going on
- 📦Plugins: All React plugins work with Remix
Remix is not so cutting edge unfortunately but it's a lot more stable and reliable than Next.js. I would recommend Remix for medium to large projects where you need a lot of stability and reliability and where a lot of money is at stake. Also Remix is adopting RSC but it will take as they try to make it stable first.
What makes Astro.js just amazing
If you haven't used Astro.js already please stop reading this article and go to their website and try it out, seriously! Astro.js is just a breeze and you know experienced developers made it because you can feel how much thought went into it. Here are the things that make Astro.js so amazing:
- 🚀Speed: Astro.js is just so fast, it's like a rocket 100 Lighthouse score out of the box basically
- 📉Low JS: Astro.js helps you reduce this JS madness that is going on in the frontend world and helps you add JS only where you need it. This is a exiting way of thinking about web development. Sprinkle JS only where you need it
- 🫴Simplicity: Astro.js is just so simple and easy to use, you can learn it in a day or two
- 💬Made for content: Astro.js is made for content heavy websites. But if you need a lot of interactivity you can also add sections that are fully client side rendered
- 🪄No magic: Astro.js is just plain HTML, CSS and JS and everything else is optional
- 🗝️No lock in: Astro.js lets you decide if you want to use React, Vue, Svelte or whatever you like. You can also use everything together
Conclusion
If you want to experiment with RSC go ahead and use Next.js. But for everything serious and everything with more users please don't reinvent the wheel and use something established and not something too hyped.
I am currently deciding on which one to use for my companies rewrite and although I am not fully settled one any on of them I lean towards Astro first, Remix second, Next.js third. You have to decide whether you want a SPA feeling or a more traditional web feeling. Although Astro can also nest SPA's in it please just use Remix or Plain React for that.
So I hope I could give you some insights on what to use and what not to use. Have a nice one!