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

Course created by @Kulkarniankita

⭐️ 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:03:05) Library vs Framework
⌨️ (0:07:58) SPA vs SSG (Single Page App vs Static Site Generation
⌨️ (0:13:18) What will be building?
⌨️ (0:15:23) Start a New Project
⌨️ (0:17:14) Tech Stack
⌨️ (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: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

🎉 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

--

[ssava_ema]

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

[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.

[-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.

[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.

[ozaiproduction]

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

[georgevs]

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

[LukeDyani-rhzd]

This course is very important..thank you

[Iammuslim]

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

[richardbrain]

Great video until 1:35, at which point I had to abandon the video as I couldn't see the code, which was frustrating. I did learn a lot though: it was very clearly, thoughtfully, and concisely explained.

[StevenCodeCraft]

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

[carlosalbertocabreraquirog]

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 😛

[newbie-swdev]

Hello, I've followed your tutorial through and through but my app displayed on the browser isn't entirely responsive (Doesn't reduce to 4-3-2-1). On my small MBP-13 I have 4 columns of the recipe displayed but the cook time is even displayed outside of the card's border.
Could you also explain why are some functions like getAllRecipe, getRecipe and fetchRecipe in your videos are defined as asynchronous function, is there any purpose behind it? And why do the ingredients and instructions have keys in it? Is it necessary?

[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?

[worldhack.]

Provide complete devops course with nodejs

[effortlessjapanese]

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

[levdoescode]

1:07:04 That's wrong, 'American' is not a cuisine 😁

[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.

[davidmaeso]

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.