Next.js vs React - What's the difference?

What's the difference between Next.js and React? Learn more about frameworks and libraries and when to use React, Next, and Vite. Learn data fetching mechanisms, rendering strategies, how to build performant apps, SEO techniques, and more.
Course created by @Kulkarniankita
FREE Cheatsheet with all the links and resources shared in the course: bit.ly/nextjs-react-cheatsheet (to help you follow along)
Ankita's upcoming workshop: bit.ly/nextjsworkshop-freecod...
⭐️ Contents ⭐️
⌨️ (0:00:00) What is this Course About? and What will you learn?
⌨️ (0:01:28) Download the Free Cheatsheet to follow along
⌨️ (0:02:03) Upcoming Next.js Workshop
⌨️ (0:03:05) Library vs Framework
⌨️ (0:05:11) React vs Next.js
⌨️ (0:07:58) SPA vs SSG (Single Page App vs Static Site Generation
⌨️ (0:11:02) What is Vite? and How does it compare to Next.js?
⌨️ (0:13:18) What will be building?
⌨️ (0:15:23) Start a New Project
⌨️ (0:17:14) Tech Stack
⌨️ (0:19:24) Create a React app & a Next.js app
⌨️ (0:28:49) Tailwind Deep Dive
⌨️ (0:32:57) Use shadcn/ui in our projects
⌨️ (0:39:01) Routing Deep Dive
⌨️ (0:44:55) Setup our Browser Router
⌨️ (0:51:40) Routing Comparison
⌨️ (0:53:18) Quick Tip 🔥 How to Navigate Docs in Next.js
⌨️ (0:53:43) Add Navigation Bar
⌨️ (0:59:56) Different Rendering Techniques
⌨️ (1:05:33) Let’s add Badges to our App
⌨️ (1:13:40) Data Fetching
⌨️ (1:17:53) Let’s use Fetch to fetch the Recipes
⌨️ (1:23:01) Client and Server Components
⌨️ (1:28:52) Filtering in TastyReact and TastyNext
⌨️ (1:43:00) Data Fetching Summary
⌨️ (1:43:28) Recipe Page in our App
⌨️ (1:54:16) How should you start with learning React?
⌨️ (1:56:44) Performance Deep Dive
⌨️ (1:59:29) Font Optimization
⌨️ (2:04:10) Search Engine Optimization (SEO)
⌨️ (2:09:45) Application Ready for Production
⌨️ (2:17:38) Next.js Workshop Goodies
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@Kulkarniankita]

Hey friends, thanks so much for checking out this crash course! You can subscribe to my channel over here 👉 www.youtube.com/@Kulkarniankita to continue learning further! Hope you like the course 😊

[@-ok-]

I love this video... * The pace and depth was perfect for me. * As someone new to Web Dev (previously Data/Desktop), this provided a great overview of the technologies involved. * The relaxed, informal - friendly style made the topic approachable. * She referenced the docs, and made me realise that even the pros just follow instructions! * Comparing react vs next was an unusual/risky choice, but it worked - react gives the concepts some depth, and next makes them approachable for newbies. Having said that, there are some things could have been done better: * Minor glitch with your voice at 14:57 * The entire Client vs Server components section (starting 1:21:01) was confusing - it should have been researched and conveyed clearer (IMO). * From 1:35:01 to 1:37:39, you were making changes to code etc, but we couldn't see the code/screen - only your face was visible - and at the end of the section, the voice is suddenly cut off and the video seems to transition all of a sudden to the next topic. I struggled a bit to continue after the sudden topic switch to Context / etc - I assume you might have recorded some more information about the Context and what purpose it serves etc but it was cut out due to the editing issue mentioned above. This is the feedback until 1:38:00 - I hope to continue the course later and share any additional thoughts after that. None-the-less, this has been very helpful - thank you! And I wish you all the best.

[@Kulkarniankita]

Thanks for your detailed feedback 🙌

[@ssava_ema]

I think this is enough for me to get started with NEXT.js

[@spacexnix]

You're reading my mind. I recently thought that we lack such a comparison. And it hasn't been a few days since this video was released! Thank you very much. It's a really amazing comparison.

[@ozaiproduction3450]

Very informative comparison. Thank you for sharing this video. I use Remix JS now since its easier to create shopify stores with it

[@chriskemmett]

This is a very informative video - thanks. Around about 1:36:00 you talk about changes you are making, but we don't see any screen recordings, just yourself talking.

[@StevenCodeCraft]

Wow, this is a great course and I really like the visual diagrams!

[@LukeDyani-rh3zd]

This course is very important..thank you

[@georgevs75]

Minor suggestion - since one of the course objectives is to compare react vs next, the names of the projects themselves (rather than the base paths) should reflect on the project type. This way it will be immediately obvious from the explorer tab caption which context the current presented file pertains to

[@-ok-]

Isn't that what she did - name the projects differently (tasty-react vs tasty-next)? In my VS Code, the project names (tasty-react / tasty-next) are visible in the package.json, Explorer, and in the search box on the top... Not sure what we're doing differently.

[@rishiraj2548]

Great thanks

[@Iammuslim947]

A difference video is 2 hour long ,appreciate u guys👏 however i didn't watch it😅

[@ShamimHasan12363]

Thanks sir

[@carlosalbertocabreraquirog8297]

Why don't you use PascalCase for naming React component files? Isn't it a better practice?

[@jojokman]

awsome video !! love the way you pronounce vite , i hear weed 😛

[@davidmaeso7187]

Afortunadamente me lesioné solo 1 vez cuando comencé a correr. Llevo años sin lesionarme ya que voy mucho por FC y sensaciones. Respetando siempre estiramientos y descanso.

[@alikaracadev]

awesome video

[@worldhack.1201]

Provide complete devops course with nodejs

[@naveenchinthakindi9418]

👍👍

[@afritbagani]

Me who learning both.

[@newbie-swdev]

Hello, this might sound silly but is there any specific reason to why not all .tsx (pages) has import React from 'react' included?

[@Kulkarniankita]

Next already adds React in context for tsx or jsx files

[@effortlessjapanese123]

Mine didn't create a .next build folder like your's did 25:57

[@Kulkarniankita]

When you run npm run dev it has to create that folder or your app wouldn’t be working. Are you sure you aren’t hiding any folders?

[@abirdutta1357]

I just saw her another video today

[@Kulkarniankita]

I am glad the algorithm is doing its thing 😊

[@nakayuni]

Stop reading comments and focus on the video

[@TheDavidlloydjones]

Her name was impossible to catch when said quickly, so you should spell it out in the caption or else overlay it on the video at some point.

[@Kulkarniankita]

Hi! I’m Ankita :) you can check my channel at www.youtube.com/@kulkarniankita

[@Kulkarniankita]

Hey I’m Ankita - the creator of this course! 😊

[@BMILTV]

She said it… but the 2 aren’t comparable

[@doruktekel3438]

14:57 / 15 :01 voice is gone

[@mahadevprasadpal7829]

I knew from the thumbnail that she must be an Indian 😄

[@navstr10]

main v 😅🙌🙌

[@sushantdeshmukh4854]

Yeah boi😂😂💀

[@8m4an]

react context is such a headache

[@drinsafahmed]

Ooo you are maybe indian or asiyn

[@effortlessjapanese123]

my tsconfig.json doesnt have "paths" like yours 33:37

[@Kulkarniankita]

You could add it so you can import without using ../

[@AhmadNasriya]

The title says what's the difference between them, I found out the answer later, wasn't expecting a tutorial. Also, the tutorial is hard to follow up with, too much to take and too little explanations. Definitely a discouragement

[@worldhack.1201]

First comment

[@SRG3482]

Second comment

[@Ham.AI.]

First

[@andiolibron9986]

Why is this comment only got one like?

[@nested9301]

Stop the zestiness

[@Fjoke8]

Why do you need likes?

[@youssefkanzouz3215]

Arabic please

[@Igor-vk8fl]

Learn english please

[@_justarandomone_8884]

Chinese for me also.

[@-ok-]

@@Igor-vk8fl I think he meant that Arabic cuisine should be included in the list 😂