DEV Community

Cover image for Bye bye create-react-app, Hello Next.js and Vite!
Maria Abelarda Diaz
Maria Abelarda Diaz

Posted on

Bye bye create-react-app, Hello Next.js and Vite!

As we should all know by now (all that work with React), on March 17th, the React team launched their new website with documentation. I received the news the same day but, like many other people (I suppose), I didn't pay much attention to it.

The next day, I was practicing with a friend how to initialize a React project for an event we had the following week. Usually, I needed to repeat the process two or three times until I got it right with GitHub and everything. A reminder that I am pretty new to React is in order. Usually, I used create-react-app by recommendation of the coaches who guided me during the Laboratoria boot camp. On my first try, I got an install error, so I decided to search for how to solve it. I ended up on the create-react-app GitHub page where I saw the same issue published a week before by another user. So, I decided to post inside the same issue that I had the same error that day. To my surprise, the kind user responded to me and informed me that create-react-app was no longer recommended by the new documentation launched the day before, which I didn't read! He gave me some options, but of course, I needed to see for myself.

As it was Friday afternoon by this point, I just complained a little (for the pleasure of it mainly) and decided to get to work and learn the newly recommended options to substitute create-react-app.

On Monday, I put myself to work. I chose to learn two methods to create a new React project: Next.js and Vite. As it happened, Vite was incredibly fast and easy to use, and I got it running on my first try. Then, I took a look at Next.js and LOVED IT! It is so organized and structured and is not difficult to grasp. So, I am hands-on learning Next.js. As for the event, we used Vite, and everything went smoothly.

Moral lesson: Read the documentation of the technologies you are using frequently. And if you know that there is a new one, even more so!

Top comments (7)

Collapse
 
awaisalwaisy profile image
Alwaisy al-waisy

Is there any way to downvote. I am really looking for article where I can learn how to create next js app using vite. But no here author told his/her story. I was clickbaited

Collapse
 
laladiaz profile image
Maria Abelarda Diaz

I am sorry you feel this way. It was never my intention as anywhere in the title or tags say it is a tutorial or a how-to article. If what you want is an article like this I can post one. I didn't at the time because I never thought someone would be really interested as the docs for both Next.js and Vite are so explicit. I really appreciate your feedback!

Collapse
 
raffallves profile image
raffallves

Hi, Maria! I think what he meant to say is that, currently, there is no official way to use Vite with Next.js. The closest thing to Next.js that Vite supports right now are React and Preact, while Next.js has its own bundler.

He was expecting an article that taught him how to do that because yours is the only one that shows up on Google when you search for how to use both technologies together.

Keep up with your articles, though! I guess I can leave you with the suggestion of inserting code snippets into your texts to make them feel more tutorial-like — even though I know that's not what you were aiming at with this one, it does drive more traffic to your profile since that's what 90% of people are looking for when searching the web for code-related content.

Good luck on your coding journey. Best regards from Brazil!

Thread Thread
 
awaisalwaisy profile image
Alwaisy al-waisy

Thanks Raffallves for understanding.

Oh, Next has no support yet. I did not know about only react and preact support vite. I thought there might be a way. Next will not have support even in v14 becuase vercel has turbopack for NextJs.

Thread Thread
 
laladiaz profile image
Maria Abelarda Diaz

Thanks Raffallves! I didn't catch that from that respond post... And thanks for the suggestion! I will do that in the future!! :D

Collapse
 
awaisalwaisy profile image
Alwaisy al-waisy

That's fine, I should see the title carefully. I searched but I did not get proper article titled NextJs and Vite. If you found any resource, please mention or write an article.

Collapse
 
quangpn7 profile image
Nhut Quang

Really a nice clickbait, we are all trapped 🤣