Chapters (32)
- 0:00What is this Course About? and What will you learn?
- 1:28Download the Free Cheatsheet to follow along
- 2:03Upcoming Next.js Workshop
- 3:05Library vs Framework
- 5:11React vs Next.js
- 7:58SPA vs SSG (Single Page App vs Static Site Generation
- 11:02What is Vite? and How does it compare to Next.js?
- 13:18What will be building?
- 15:23Start a New Project
- 17:14Tech Stack
- 19:24Create a React app & a Next.js app
- 28:49Tailwind Deep Dive
- 32:57Use shadcn/ui in our projects
- 39:01Routing Deep Dive
- 44:55Setup our Browser Router
- 51:40Routing Comparison
- 53:18Quick Tip 🔥 How to Navigate Docs in Next.js
- 53:43Add Navigation Bar
- 59:56Different Rendering Techniques
- 1:05:33Let’s add Badges to our App
- 1:13:40Data Fetching
- 1:17:53Let’s use Fetch to fetch the Recipes
- 1:23:01Client and Server Components
- 1:28:52Filtering in TastyReact and TastyNext
- 1:43:00Data Fetching Summary
- 1:43:28Recipe Page in our App
- 1:54:16How should you start with learning React?
- 1:56:44Performance Deep Dive
- 1:59:29Font Optimization
- 2:04:10Search Engine Optimization (SEO)
- 2:09:45Application Ready for Production
- 2:17:38Next.js Workshop Goodies
Show the creator's full description
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
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.