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: https://bit.ly/nextjs-react-cheatsheet (to help you follow along)

Ankita's upcoming workshop: https://bit.ly/nextjsworkshop-freecodecamp

⭐️ 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