Next vs Nuxt in 2024, which one is better in 2024?
Recently i deep dived in Nuxt and NextJs, and i wanted to share my thoughts on the top 2 meta frameworks for Vue and React, and how they compare to each other.
With more than 10 years of expirience in web development, i have seen a lot of frameworks come and go, but Nuxt and NextJs are here to stay. In this article i will compare the two frameworks and give you my thoughts on which one is better in 2024.
React vs VueSection titled React vs Vue
The first choice ( that will not cover on this post ) is to pick betwen React or Vue, both are great frameworks, but i will assume you already picked one of them for your project. At the time of this post, both have a great community and are very popular, so you can’t go wrong with either of them, being React more popular and Vue more beginner friendly. On this article ill not cover some basic stuff, both Frameworks support a lot of stuff, so ill just focus on the high level features.
1- NextSection titled 1- Next
I have recently tried next for a personal project, and while im biased towards Vue, i have to say that NextJs is a great framework, with a lot of features and a great community. But not everything is beautiful, i have tried so hard to ignore all the DX that Vue gives me to embrace the NextJS + React hype train, i have tried to first research about some medium to large nextjs projects on Github to learn more about the framework. Reading the documentation, learning the best pratices, watch some tutorials & videos to get more familiar with the framework, but that wasnt enough comming from Laravel we are REALLY spoiled with the DX that Vue or Laravel gives us. Lets go the pros and cons of NextJs:
1.1 ProsSection titled 1.1 Pros
- Great, Big & Active Community
- Somehow great documentation
- Out-of-the-box support for TypeScript
- SSR, SSG, ISR
- Great Concept for Server & Client Components, really loved this feature
- React Ecosystem is Huge, so Next kindly inherits that.
- Pages Routing is really simple and easy to understand
- Minimalistics / Bare bones, you can add only what you need
1.2 ConsSection titled 1.2 Cons
- Vendor Lock-in, no matter what you say, Vercel is the way to go for next
- Webpack :(, its really slow on dev & build, most of the times compared to a Nuxt project
- Middleware, there is no concept of multiple middlewares, you have to use a single middleware for all routes, or you have to implement your own middleware stack
- i18n, while there is a few “demos”, none of them are actual real world examples, and the documentation is really lacking, there is external packages but they are HEAVLY complicated to implement in my opinion.
- Server & Client components, while a great concept, it’s really hard to understand and implement, you endup prop drilling a lot of data
- Server & Client Lines blured, you have to be really careful with what you are doing, and you have to know what is running on the server and what is running on the client, a little mistake could be a big problem.
- NodeJS support for Middleware, this a BIG one, while Next advocates that Middleware should not run NodeJS but their “Edge” server, there is a lot of cases where you need to run NodeJS code on the Middleware, and this is not supported by Next by the time of this post, this is REALLY necessary for basic stuff like Auth Checks against database.
- Dev Experience, while the DX is not bad, it’s not as good as Nuxt, there is no proper way to debug your code. React DevTools with nuxt is a HUGE pile of nested contexts.
- Unstable, it seems like there a lot of breaking changes on every release, and the community is not happy about it, there is a lot of issues on Github about this.
- Lack of Documentation on how to deploy, other than vercel.
- Somehow slow, while SSR is good, it seems slower than traditional SPAs at first load.
2- NuxtSection titled 2- Nuxt
After my mission with NextJs, i have decided to replicate the same project, but this time using Nuxt, i had most of my components already done with Shadcn, and it could easly transfer a lot of code-base from next. Nuxt instantly provides a better DX than Next, cant deny after a few weeks of React i was really happy to be back on Vue!
With my struggles from NextJS in mind, here is a breakdown for nuxt:
2.1 ProsSection titled 2.1 Pros
- Great, Big & Active Community, Vue is growing a lot, and Nuxt is growing with it
- Lots of composables out-of-the-box, like useFetch, useMeta, useHead, useState, etc
- Great Documentation, really easy to understand and follow
- Amazing Plugin & Modules system, you can add a lot of features with a single line of code
- Out-of-the-box support for Stacked Middlewares, attach them & use them.
- Nuxt i18n just works, with a few clicks you can have a multi-language website, no stress!
- Top-notch DX, install modules directly from the Nuxt DevTools, check OpenGraph Images, Dependencies, preview builds.. just amazing!
- Great hooks for deduping & caching around oFetch.
- Amazing Universal support from Unjs ecosystem
- No vendor lock-in, you can deploy to Vercel, Cloudflare, etc
- Middleware supports node & edge runtimes
- Vue Reactivity system & bindings are just great!
- Support for “Islands”, Server & Client components are really easy to understand and implement
- Configuration in one place, no need to search for a lot of files, everything is in nuxt.config.ts
- Easier to Implement Auth Modules
- Auto-imports for components, composables, etc, just go write your business logic, no need to import stuff.
- Vite Bundler, its really fast, and the DX is just amazing + the ecosystem
2.2 ConsSection titled 2.2 Cons
- Confusing sometimes, because there is a lot of hooks, composables, etc, sometimes you dont know what to use, or whats the correct one for a specific case.
- Documentation is still lacking some “best practices” for some features.
- Unstable sometimes, while the auto-imports are a good DX, they also create buggy code, and its really hard to find the source of the bug sometimes.
- Server Components are not yet polished, you cant mix and match client & server components like next ( yet )
- Lack of methods to inject configurations from the user-land & modules ( still better than nextjs, that has none )
- Unclear on what composables & features you can on server & client, leading again to unexpected bugs & head to debug
The WinnerSection titled The Winner
While both Frameworks are great, the winner for me its clearly Nuxt, the DX is just amazing, and the features are just great compared to Next. I could probably do the same project 10x times faster with Nuxt than with Next, one of the biggest concerns for me its also the vendor lock-in for Vercel, while a lot of people try to deny and argument against that, for me its crystal clear that NextJS doesnt have / doesnt want to make this changes, resulting in a lot of Drama on Twitter & Reddit. In other hand React has a huge ecosystem, and if you are already using React, NextJs is a great choice, you may also consider Remix as an alternative.
ConclusionSection titled Conclusion
In the past years a lot of meta-frameworks appeared and some of them are here to stay, for me there is no perfect one yet, Nuxt has a good potential to be the best one, but there is still a lot of work to be done, not only in Nuxt but also Vue ecosystem. Im still a big fan of starting my own projects with Vanilla Vue or React, and call it a day, bring your own plugins, your own features, and your own DX, but if you are in a hurry or you want a quick MVP both are great choices.
On big concern that i also have with the full-stack javascript frameworks is, while they provide a really flexible way to build applications with a single language & code-base, they can also create de inverse effect. For instance including or importing a server module in a client module could potentially leak important data like API Keys, Database Connections, so ALWAYS make sure you double check your code before deploying it to production.
For me Rails/Laravel + Vue/React is still the best way to go, but if you are looking for a quick MVP or a small project, why not give it a go?
Stay safe, and happy coding!