HACKER Q&A
📣 chadash

Vite or NextJS?


I am building a new project from scratch. I have a backend already written in Python/FastAPI. I have React/Typescript experience with CRA and Vite (and I prefer the latter). I haven't used NextJS before, but I'm interested in learning more about it. I'm thinking of using it and figuring it out as I go along, but I'm wondering how much time I should expect this to set me back? If I'm already familiar with React, will NextJS take me a few hours to pickup? A few days? Weeks? I understand that this is a broad question and everyone has different capacity to learn, but I'm trying to get a rough sense since I don't want to push off deadlines too much.


  👤 linkdd Accepted Answer ✓
If we were still on Next.JS 13, I would advise against it, that version saw the introduction of the "App router" which replaced the "Pages router", and as all new shiny things, it had a lot of warts and migration was painful.

Next.JS 14, which introduced server actions, is really worth it though.

But, IMHO, the main advantage of Next.JS is Vercel. You get a free platform to deploy your app just by "pointing it to your git repository". I've used it with Prisma and MongoDB (with a MongoDB Atlas free instance), so I have deployed my app completely, free of charge. Which for proof of concepts is a great thing.


👤 thatxliner
I, a high school student, had almost never used Next.js before I built [Zyma](https://github.com/EvanZhouDev/zyma) with my friend in a 12-hour hackathon. I learned how to use Next.js properly within and beyond that hackathon (in around 3-6 hours of actual learning and experimenting in total), just from reading the documentation.

I almost never used Next.js before because I had contributed to another project before that uses Next.js, but never really touched the parts that are Next.js-specific.

The main thing about Next.js (or I guess any modern React meta-framework in this day) that was a new concept to me would be React Server Components.

My experience with Vite consists of SvelteKit (which is built on Vite) and I would just say that the DX of Vite is a bit nicer than Next.js as Next.js tries to get in everything: it’s fairly opinionated on how to do things while Vite typically doesn’t get in your way.


👤 sudheerkumar
I had a background in Vue.js and hadn't worked with React or Next.js before, but I took the plunge and started my project using Next.js (https://github.com/sudheerkumarme/curo-care-pwa). I found the learning curve surprisingly smooth, thanks to Next.js' excellent documentation. If you're considering it, I'd encourage you to dive in and learn as you go.

Next.js builds on React, so if you're comfortable there, picking it up might take a few days to a week. The documentation is extensive, making the initial learning process quite manageable. I suggest starting with the official Next.js documentation (https://nextjs.org/docs) as it provides a comprehensive guide.

One thing to keep in mind is the concept of data fetching, which can be a bit tricky initially. The documentation provides useful patterns for data fetching (https://nextjs.org/docs/app/building-your-application/data-f...), helping you navigate this aspect of Next.js development.

Next.js is more opinionated than React, which can be an advantage for newcomers. However, coming from a React background, it might take some time to adjust to the project structure and conventions. Once you get accustomed, these opinions can actually make development more streamlined.

If you decide to go with Next.js and run into any challenges, feel free to reach out to me at sudheer@nextcrafter.com. I'd be happy to lend a hand or share insights from my experience.

Overall, my experience with Next.js was pleasant. In this age of AI assistants like Bard and ChatGPT, you're likely to find valuable support regardless of the technology you choose. Happy coding!


👤 Alifatisk
Isn't Vite and Nextjs operating on different levels?

👤 adelowo
I’d say you should consider Remix. It seems to be the most straight forward yet power packed one.

NextJS always break for some weird reason and the upgrades are painful sort of


👤 chainbytheroad
I think Vite makes more sense as its framework around react to build a frontend only. Nextjs is more like fullstack framework with ability to use server components and ORM

👤 alejo
I wouldn’t call my self an expert in React or frontend for that matter.

Earlier this year, I was helping someone create an MVC for a startup idea and I stumble upon NextJS (v13 at the time).

Within 2 or 3 weeks I was able get it up and running, hosted it in Vercel for demos and hand it to the team that was going to build it.

I found it very approachable and well documented. Everything I needed was on their website


👤 ips1512
You can learn NextJS easily, if you have good understanding of React. Also, while using Nextjs for the apis, you need to learn some basic syntax like we have in Express.js or node. Rest, consider it as same as React in a broader way and you can easily follow along with the documentation of Next.JS

👤 bodantogat
NextJS is fairly easy to pickup if you're familiar with React. The basics and a quick prototype will probably take less than a day.

NextJS was (and maybe still is) a popular choice for server-side rendering. If you don't need that, not sure if its worthwhile.


👤 doradoblank
NextJS is a batteries-included full-stack framework, Vite is a lot more minimal.

If you're just looking to stand up a SPA frontend for your BE, I'd recommend going with Vite, or using NextJS but going full SPA-mode.

Doing things in a properly "NextJS"y way requires buy-in to the SSR/React Server Components paradigm, which takes some time to learn, if you're used to doing things in the SPA way. You have to architect differently -- specifically the way you handle data fetching/caching. I think it's worth digging into if you have the time, just depends on your goals.

Also worth mentioning, since NextJS is full-stack, deployment will be more involved. You might not notice any pains if you use Vercel, but definitely doesn't match the simplicity of sending along a single JS bundle with Vite.


👤 amir734jj
Go with Vite/React. It's minimal and customizable. Next.js is too much new stuff to learn.

👤 da4id
Why do you want to use Next.js if you already have a FastAPI backend?