Create React App vs. NextJS vs. Vite

Ғылым және технология

In this video I give my opinions on different tools to generate a react application. Create React App, NextJS, and Vite are all good options, but for different use cases.
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech/. The first 200 of you will get 20% off Brilliant’s annual premium subscription.
NOTE: In the video I pronounce the word Vite by saying (Vyte) when the correct pronunciation is (Veet).
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
CRA-NEXT-VITE MARKERS
00:00 | Intro
01:09 | Create React App
06:42 | NextJS
10:18 | Vite
14:03 | Which one is best?
#reactjs #coding

Пікірлер: 144

  • @grogu4344
    @grogu4344 Жыл бұрын

    Create React App is dead, bro.

  • @saeedballanc

    @saeedballanc

    Жыл бұрын

    What instead??

  • @gale993

    @gale993

    Жыл бұрын

    Are you aware that most companies work with old versions of stuff or even deprecated software? cra being dropped by React doesn't mean it no longer works, or that companies won't use it. Calm your tits.

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    I believe that it still is alive, just not recommended for most use cases

  • @kumop1718

    @kumop1718

    Жыл бұрын

    @@saeedballanc Vite

  • @shakilahmed6870

    @shakilahmed6870

    Жыл бұрын

    First learn the difference between 'dead' and 'not recommended'

  • @mahbleh404
    @mahbleh404 Жыл бұрын

    Oh my goodness !!! You have grow so much !! i saw your first video when your voice was broken. like 2 years ago but look at you how much you've grown :) i was really inspired by your VSCode editor customization and also how you organized your projects. Thank you for being consistent with your channel.

  • @cesarmelendez2577
    @cesarmelendez2577 Жыл бұрын

    heard about vite for the first time couple weeks ago and was a bit confused. fast forward and my favorite tech youtuber is making a video on it. let's go!

  • @Jeridi
    @Jeridi Жыл бұрын

    Thanks Pedro, you always amaze us with your new ideas !

  • @ekansh5039
    @ekansh5039 Жыл бұрын

    Thanx buddy for clearing my doubt i was really confused in these 3 topic ... 🌷

  • @visheshgupta4990
    @visheshgupta4990 Жыл бұрын

    Really Reallt Great video you solved my doubt It is all very confusioning what is create react app , next js or vite . Now I understand these all are the tools to write react but with there pros and cons . Next Js. is definitely I want to learn I learn react through create react app . Now the things is cleared . Thank You so much ! Subscribed

  • @fatimaortega1000
    @fatimaortega1000 Жыл бұрын

    You uploaded, you literally make my day and help me so much!

  • @epachecoc
    @epachecoc Жыл бұрын

    I heard about Vite a couple of weeks ago in my job but I never worked with that before. I gonna create some sample projects here because it sounds good. BTW thank you for the amazing content, you rock

  • @bulaloitech
    @bulaloitech11 ай бұрын

    I tried Nextjs. I like how when you 'npm run build' it transform your .js files into html which is good for SEO and why I'm thinking of changing into it from CRA that only has SPA. Still confusing tho

  • @yuvalbra
    @yuvalbra Жыл бұрын

    Grate video, what kind of extantion you used? specaily the one that you show in the terminal

  • @currojugando6585
    @currojugando6585 Жыл бұрын

    Great explanation and very clear, how do you have those automated comands on your vscode console?

  • @preyah2857
    @preyah2857 Жыл бұрын

    We need a video about SSR in Vite

  • @KodManJs
    @KodManJs Жыл бұрын

    What app or extension do you use in your vs code terminal to get that recommendation?

  • @marfab100
    @marfab100 Жыл бұрын

    Your vsc wasn't stupid with the red lines, vite doesn't install the dependencies on it's own you actually have to 'npm install' after 'creat vite'. Nevertheless cool video

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Yeyeye i forgot hahahaha I recorded all the instalations in a sequence after the vid so I was just doing it quickly. Thank you for poiting it out!!

  • @partoflife1

    @partoflife1

    2 ай бұрын

    That exactly I'd to say :)

  • @seananih7609
    @seananih7609 Жыл бұрын

    I was typing to correct your pronunciation then you and you started to explain right b4 I submitted lol

  • @peshutanpavri1599
    @peshutanpavri15993 ай бұрын

    Great video, thank you so much, I would love your opinion on this, Isn’t it true that Next.js can be used as a full backend server side application with security, database connectivity, rest clients etc ? Because I’m using Spring Java / kotlin for a lot of backend apis and I was thinking weather it’s better to use next or vite ? If I have a spring backend, is it necessary to have next.js ?

  • @marcoico7356
    @marcoico7356 Жыл бұрын

    Your really nice on your opinion 😊 keep up the good work 👍

  • @pedrohenriqueleite2146
    @pedrohenriqueleite214611 ай бұрын

    Thanks bro, you help me a lot

  • @BabatundeAjagbe
    @BabatundeAjagbe3 ай бұрын

    Am a beginner using create react am and I want to switch Pls should I use vite or next.js

  • @basilgaudion4723
    @basilgaudion47238 ай бұрын

    At 9:28, which vsCode extension enables autocompletion or suggestion in the terminal ?

  • @mydaily21
    @mydaily21 Жыл бұрын

    Finally!! Thanks mate :)

  • @Pareshbpatel
    @Pareshbpatel Жыл бұрын

    A great overview of create-react-app, nextJS and vite. Thanks, Pedro {2023-05-03}

  • @user-zv7ou5pw3q
    @user-zv7ou5pw3q Жыл бұрын

    What are you using for the terminal suggestion dropdown?

  • @ipreet6850
    @ipreet6850 Жыл бұрын

    much needed video

  • @monat_son
    @monat_son Жыл бұрын

    Good one Pedro, thanks.

  • @user-nj3lg7wi5r
    @user-nj3lg7wi5r Жыл бұрын

    I thank you for this video. I’ve done two projects using CRA. Now I’m moving to NextJS because it is the best React framework for building full-stack web applications.

  • @TechCisne

    @TechCisne

    Жыл бұрын

    Olá amigo! Sabe me dizer com NextJS teria a necessidade de utillizar o vite? Ainda estou nos meus estudos iniciais com o React

  • @matthewmurnaghan4473
    @matthewmurnaghan44735 ай бұрын

    Anyone know the name of the extension for vscode that is suggesting what flags to use and showing them witht the coloured icons?

  • @hamdihawari
    @hamdihawari Жыл бұрын

    can I upgrade from react-app to react-vita or I should create new vita-react and past every component from the last react-app to vita-react-app? Thank You :)

  • @hooooman.
    @hooooman. Жыл бұрын

    I'm a beginner and using create-react-app,and I'm planning to switch to vite,is that switching hard? I mean the syntax,other blah blah is different in vite than create-react-app?how much thing's i need to learn for it? what are the similarities between these two in terms of code , function,or other factors?

  • @lpa9189
    @lpa9189 Жыл бұрын

    What VSCode extension is used to get suggestions in terminal at 6:07?

  • @jakewolf079
    @jakewolf079 Жыл бұрын

    I'm a beginner but I'm loving Vite now

  • @howiewang4238
    @howiewang4238 Жыл бұрын

    Thank you for the video. Nice job! ~~~~

  • @appstuff6565
    @appstuff6565 Жыл бұрын

    I was learning react and almost build a project too to launch. But CRA went dead so now I am in the dilemma of should i continue or learn something else. I think this video came at the right time. Thanks.

  • @stonelam948

    @stonelam948

    10 ай бұрын

    It's not necessary to start over again when your project is almost ready to launch. IMO.

  • @sidds09
    @sidds09 Жыл бұрын

    pls do a bigger react project. learning a lot from your videos.

  • @guilhermesandoval2665
    @guilhermesandoval2665 Жыл бұрын

    I could mention that cra and vite (not entirely) are no longer being recommended in the official documentation of react, where they prioritize using a framework to create our projects, but still great video

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Yesss! But I don't think it is that big of a deal. They are both still options depending on the use case

  • @anricoj1

    @anricoj1

    Жыл бұрын

    I really dislike how they kind of pushed Vite to the bottom of the page and didn't really highlight it like all the frameworks. I would typically send a beginner to the React docs to learn react. Them suggesting to use Next, Remix or Gatsby off the bat seems kind of poor IMO. People should learn React first, not React + a framework. The first suggestion should really be Vite

  • @Sulayman.786

    @Sulayman.786

    Жыл бұрын

    ​@@anricoj1 thanks, good advice

  • @art-sider
    @art-sider Жыл бұрын

    thank you so much !

  • @vladimirpukhlenko9544
    @vladimirpukhlenko954410 ай бұрын

    please tell me who knows what kind of extension in vs code that makes hints in the terminal (6:05)

  • @ritankarbhattacharjee7661
    @ritankarbhattacharjee7661 Жыл бұрын

    please do a video on a detail explanation about webpacks and babel.

  • @aphmaple2348
    @aphmaple23486 ай бұрын

    great video, thanks

  • @techghost2024
    @techghost2024 Жыл бұрын

    Please make a video on SEO with Reactjs and Server Side Rendering with Reactjs. I don't want to leave React and learn Next

  • @LiIRobJr

    @LiIRobJr

    9 ай бұрын

    Next is a framework and is build on top of react. You can learn next and still be using react

  • @thevasupodcast4561
    @thevasupodcast4561 Жыл бұрын

    Can you make an updated tutorial on next js as it has changed a lot.

  • @Lunolux
    @Lunolux Жыл бұрын

    when i use create react app, there was like 20.000 dependancy installed (node_modules), vite js has less than 3.000 packages, that was a big difference for me, but i hope they decrease for CRA past the year

  • @s0ulweaver

    @s0ulweaver

    Жыл бұрын

    Why the f is your number of dependency packages a decimal number. If you meant to say 20000 and 3000, then use comma ffs. You can say 20000 or 20,000 or 20k even but YOU CAN'T use 20.000 because that just means 20

  • @Lunolux

    @Lunolux

    Жыл бұрын

    @@s0ulweaver what are you talking about... dot is just a separetor to make it easy to read, and in some country, the dot is the equivalent to the comma there are many way to write the great number to make it easy to read but the caractere that are use depend on the country, i dont even know why we waste time talking about that, anyone who read the first comment would know that we dont talk about 3 and 20 but 3000 and 20000

  • @s0ulweaver

    @s0ulweaver

    Жыл бұрын

    @@Lunolux oh. But if you use dot as a separator in those countries, then how do you write this number: 1,562,897.4603 with dot as a separator instead of comma? It would be 1.562.897.4603 now you don't know where the decimal point was because of using dot as a separator. And so when you said 20.000 it seemed like the number 20.

  • @HSGG_

    @HSGG_

    11 ай бұрын

    ​@@Lunolux 20.000 = 20 20.000 /= 20,000 Don't believe it? Put it in vs code, it never lies.

  • @warsame2245
    @warsame2245 Жыл бұрын

    my only issue with vite is that the server crashes when it encounters a problem unlike CRA but everything else, Vite clears it

  • @NoOne000_Official
    @NoOne000_Official Жыл бұрын

    Hey can you make a tutorial making a todo app with react and electron with offline storage. And your videos are amazing.

  • @nathansantos4197
    @nathansantos4197 Жыл бұрын

    I have a Saas in production created with CRA and I don't have any plans to update to Nextjs. I don't have any problem with CRA and it's A LOT MORE easy to use.

  • @marin1419

    @marin1419

    Ай бұрын

    what about SEO though?

  • @nathansantos4197

    @nathansantos4197

    Ай бұрын

    @@marin1419 the same thing

  • @qgameua
    @qgameua Жыл бұрын

    what's terminal extension u use?

  • @gitraccoon
    @gitraccoon Жыл бұрын

    Vite - French word for "quick", pronounced /vit/, like "veet".

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Yess! I mentioned this in the vid :)

  • @jayasaikiran1761
    @jayasaikiran1761 Жыл бұрын

    Bro IF possible make a tutorial on next js 13 version how to setup and routing concept in depth…

  • @mlnima
    @mlnima Жыл бұрын

    I am thinking to switch from nextjs to vite since they have stupid updates with no docs or example in whole internet. if any one knows can we have easy setup of i18n in vite react along server components please let me know

  • @dhruvkumar-br2lp
    @dhruvkumar-br2lp5 ай бұрын

    Thanks

  • @thevasupodcast4561
    @thevasupodcast4561 Жыл бұрын

    Bro, I love your content. You're my inspiration. I'm preparing for internships, can you please make some guidance videos on it ? Also where are you joining full time? My guess - twitch

  • @johanesalberto6136
    @johanesalberto61364 ай бұрын

    thanks brother

  • @GideonKNgetich
    @GideonKNgetich11 ай бұрын

    What's that theme you're using??

  • @samuelkamau1550
    @samuelkamau1550 Жыл бұрын

    Great video, How about Remix ?

  • @shakilahmed6870
    @shakilahmed6870 Жыл бұрын

    I high time for you to come up with next js 13 tutorial series

  • @samarnagar9699
    @samarnagar9699 Жыл бұрын

    I don't know if this is too much to ask can you make your react guide wi vite I just think cra is uhh well you know

  • @DesignDensity
    @DesignDensity Жыл бұрын

    Thanks for the video :) BTW, Vite is a French word and it reads "veet" 😉 Cheers

  • @nested9301

    @nested9301

    Жыл бұрын

    vayt

  • @vonghesjonovan
    @vonghesjonovan Жыл бұрын

    thank you

  • @ubitubee
    @ubitubee Жыл бұрын

    Noob here, isn’t SSR more expensive than CSR? Does it matter?

  • @dimasnytin
    @dimasnytin Жыл бұрын

    Greatly 🤩🤩🤩

  • @yancavalcante27
    @yancavalcante273 ай бұрын

    Great video, Pedro! Hey, I'm curious about something... Are you brazilian or even son of brazilian parents? It's kind of weird that I understand almost 100% of what you said cause your accent sounds like mine hahah

  • @PedroTechnologies

    @PedroTechnologies

    3 ай бұрын

    Lol I am 100% Brazilian! I lived in Salvador, Bahia for 18 years and then came to Canada for university :)

  • @yancavalcante27

    @yancavalcante27

    3 ай бұрын

    I knew it hahaha! And I’m from Nordeste too ✨ Another reason to be a follower hehe

  • @daniellimae
    @daniellimae Жыл бұрын

    Boa d+ ! tks for the good content

  • @shravyashetty3115
    @shravyashetty3115 Жыл бұрын

    How do I connect mongodb with react vite?

  • @siosaiafonua9286
    @siosaiafonua92865 ай бұрын

    which one is better, nextjs or vite?

  • @kurdishfreeman7568
    @kurdishfreeman7568 Жыл бұрын

    Actually you forgot the most performant react framework, it's called Remix.

  • @iUmerFarooq
    @iUmerFarooq Жыл бұрын

    Any chances of making Vuejs tutorials?

  • @irtazahussain8118
    @irtazahussain8118 Жыл бұрын

    Hey @pedro, I hope you are well. I've a request regarding a video. Can you please make a video on KZread miniplayer?

  • @Tech-Dev
    @Tech-DevАй бұрын

    Cheer for this

  • @PanlasangMotour
    @PanlasangMotour Жыл бұрын

    Vite is interesting hmm is this new ? can you make a sample tut using vite just a simple app ❤

  • @dnjosh10
    @dnjosh107 ай бұрын

    Could you imagine that I spent over an hour just to remove one package from my application created using CRA. That thing called create react app is slower than snail

  • @user-gf9ri4wj5h
    @user-gf9ri4wj5h Жыл бұрын

    Next js first load js size is a problem.

  • @preyah2857
    @preyah2857 Жыл бұрын

    Great :)

  • @ROHAN4953
    @ROHAN4953 Жыл бұрын

    Can you make a tutorial for using nextjs as frontend with a custom backend server? Please

  • @cryMoreLoL

    @cryMoreLoL

    Жыл бұрын

    Why would anyone do that? 😂

  • @ROHAN4953

    @ROHAN4953

    Жыл бұрын

    @@cryMoreLoL so beginners like you can learn something new and not stick to basics

  • @cryMoreLoL

    @cryMoreLoL

    Жыл бұрын

    @@ROHAN4953 If you really knew what you were doing you wouldn’t be asking on youtube. Project much? 🤡

  • @Kretzzz
    @Kretzzz Жыл бұрын

    I'm already halfway through on my project. Then seeing all the videos about create-react-app is not recommended by lots of devs. I'm thinking of redoing the front-end of my project now 😫.

  • @jeklo3713

    @jeklo3713

    Жыл бұрын

    Same I'm starting to make a project but I'm confused what should I use should I use vite or cra?

  • @anamatei2134

    @anamatei2134

    Жыл бұрын

    Don’t . Just finish this project and learn as much as you can and then start another project and learn NextJs. You need to know the difference between these two so you can understand why create-react-app is not recommended anymore

  • @GemboyTV

    @GemboyTV

    Жыл бұрын

    ​@@anamatei2134 hello. So you recommend nxt js than vite? I'm just starting to learn react, some suggest not to use CRA, instead vite, but now there is also next js?

  • @error_man8045
    @error_man8045 Жыл бұрын

    Imagine sacrificing SSR,ISR,page based routing for vite

  • @vishnun7769
    @vishnun7769 Жыл бұрын

    Vite is superb

  • @NZTechArc
    @NZTechArc11 ай бұрын

    What is server side rendering. Some new age bullshit. Someone please talk about MVC.

  • @tutoriais5266

    @tutoriais5266

    11 ай бұрын

    Go away with your f ing negativity.

  • @jtaylor8606
    @jtaylor8606 Жыл бұрын

    Is it pronounced vIte or veet? The veet pronunciation is how the French word vite is pronounced, and that word translates as 'fast'.

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Veet

  • @muhammadxojarustamxojayev7678
    @muhammadxojarustamxojayev7678 Жыл бұрын

    Vite is good but it has some issues which is not solved yet. 1. Routing problem. I don't why but when vite project is deployed online and when you want to go other pages of your application, it shows error. You can solve that problem but it takes time. 2. Second is testing, Vite doesn't support testing out of the box yet like cra. And you can configure that as well but this takes time too.

  • @LuisReyes-zs4uk

    @LuisReyes-zs4uk

    Жыл бұрын

    I had that routing problem as well! Super frustrating. How did you go about fixing it?

  • @berat2690

    @berat2690

    11 ай бұрын

    what's the routing problem can you explain

  • @TheBerkayBUHLAR

    @TheBerkayBUHLAR

    11 ай бұрын

    @@LuisReyes-zs4uk If it is on vercel there is a rule that you have to define

  • @NoumanKhan-ck7vx
    @NoumanKhan-ck7vx Жыл бұрын

    how to create next js with vite

  • @cryMoreLoL

    @cryMoreLoL

    Жыл бұрын

    You can’t! Vite is a build tool! Next js is a full stack framework that currently uses TurboPack.

  • @H4KV
    @H4KV11 ай бұрын

    tu parece brasileiro, sei la, acho assim, mas congratulations for the video!

  • @victorvillacis6764
    @victorvillacis67644 ай бұрын

    It’s Viiiiit and next js uses webpack

  • @maecana3695
    @maecana369510 ай бұрын

    Vite in french is 'FAST'

  • @GuilhermeAlmeida12
    @GuilhermeAlmeida12 Жыл бұрын

    Boa! Você tem pretensão de fazer videos em Português? Hehe

  • @AndreSpecht

    @AndreSpecht

    Жыл бұрын

    Ele atinge muito mais usuários com inglês. Já passou da hora de brasileiro aprender inglês

  • @WhyNot-fp6cv
    @WhyNot-fp6cv7 ай бұрын

    How about if vs javascript? 🤣

  • @bojanbokisha
    @bojanbokisha Жыл бұрын

    Vite the best

  • @tjw2392
    @tjw23928 ай бұрын

    CRA eject can be nice. /shrug

  • @vishalsolanki9234
    @vishalsolanki923411 ай бұрын

    wbu turbopack ?

  • @haroonahmed1077
    @haroonahmed107710 ай бұрын

    RIP CRA. 1 like to pay respect

  • @user-qq4qm1jf8d
    @user-qq4qm1jf8d11 ай бұрын

    While I admire all those developers creating these videos and posting here in youtube for free, I'd advice developers beginners to ALWAYS do a research and form your own opinion around a subject. You should be able to read/watch any content on the internet and be able to differentiate fact from opinion. Saying that Server side rendering will be better because of SEO improvements is correct. But there is some information missing regarding SSR. - Not all applications need SEO, so you don't really need SSR in every system you develop. - It's slower to render. So, you lose a bit of performance. - It adds more complexity specially if the application is very dynamic. So, you lose a bit of performance also on the development side. - It will require more resource from the server. Not too much, but it will.

  • @jvalbuquerque5601
    @jvalbuquerque5601 Жыл бұрын

    Tu é brasileiro por acaso? ksksksks

  • @RealMusicLives33
    @RealMusicLives3310 ай бұрын

    ""veet""

  • @tubebility
    @tubebility Жыл бұрын

    vite ~ bite veet ~ feet 🙄

  • @ased4u
    @ased4u Жыл бұрын

    why you calling it vite? its obviously called vite.

  • @salahaldinedouard5299
    @salahaldinedouard5299 Жыл бұрын

    It’s pronounced veet not vite it’s a France word not English

  • @NZTechArc
    @NZTechArc11 ай бұрын

    Dude Slow Down. You speak to fast listen to your self back, "React React App" blurrs together into a mumble.

  • @vali69

    @vali69

    10 ай бұрын

    Nah man, maybe you're just old. I wonder what you'd think about Japanese, since if this is fast, Japanese would sound like Eminem singing rap god.

Келесі