Next.js vs React: Key Differences Explained
Compare Next.js and React to understand their features, use cases, and data fetching methods for better development choices. ⚛️
freeCodeCamp.org
47.1K views • Apr 30, 2024
About this video
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: https://bit.ly/nextjs-react-cheatsheet (to help you follow along)
Ankita's upcoming workshop: https://bit.ly/nextjsworkshop-freecodecamp
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Course created by @Kulkarniankita
FREE Cheatsheet with all the links and resources shared in the course: https://bit.ly/nextjs-react-cheatsheet (to help you follow along)
Ankita's upcoming workshop: https://bit.ly/nextjsworkshop-freecodecamp
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Video Information
Views
47.1K
Likes
1.2K
Duration
02:17:57
Published
Apr 30, 2024
User Reviews
4.7
(9)