Next.js Crash Course for Beginners 2025 | Build a Full Stack App

Video Description

🚀FREE 2025 Next.js Visual CheatSheet plus Github code: https://bit.ly/nextjs-visual-cheatsheet Ultimate Next.js Crash Course covers everything that you need to know to master Next.js and teach you how to build a full-stack, modern and production ready application. It covers technologies and we will learn things like complex database manipulations using Supabase, TypeScript, TypeScript Form Validations with Zod, React, different data fetching mechanisms such as Incremental Static Regeneration, Server-side rendering and Static site generation, Server Actions and Mutations, everything about Caching in Next.js alongside Gotchas, Build a SEO friendly site and more. ⭐️ Website we're building: https://nextjs-crash-course-theta.vercel.app/ #nextjs #react #javascript #tailwindcss #typescript 🚀 Sign up for the Ultimate Next.js Course Waitlist: https://bit.ly/nextjscourse 👉 FREE Next.js Best Practices Course: https://bit.ly/nextjshottips Discord for questions/help from others: https://discord.gg/R96qCSyf3A ⏰ Timeline 00:00 - 01:46 - What this Course Covers 01:47 - 05:12 - Next.js Workshop 05:13 - 05:27 - Download Next.js Visual CheatSheet 05:28 - 08:15 - Create your First Next.js App 08:16 - 10:17 - Walkthrough of the Codebase 10:18 - 14:22 - Routing in Next.js 14:23 - 17:44 - Intro to TailwindCSS 17:45 - 23:57 - App Architecture 23:58 - 26:32 - Next.js Link Component Deep Dive 26:33 - 30:14 - Server and Client Components 30:15 - 32:15 - Server and Client Components Examples 32:16 - 35:07 - When should Components be Client Components? 35:08 - 38:41 - Build Card Component 38:42 - 40:32 - Card Component Code Walkthrough 40:33 - 42:13 - Next.js Image Component Deep Dive 42:13 - 46:25 - Integrate Next.js Image Component inside Card 46:25 - 47:30 - Main Page Styling and Structure 47:31 - 52:46 - What is Supabase & Let’s set it up 52:46 - 53:21 - Row Level Policies in Supabase 53:21 - 57:42 - Caching Deep Dive in Next.js 57:42 - 58:20 - Data fetching Code Walkthrough 58:20 - 59:13 - Install Supabase in our Environment 59:13 - 01:02:42 - Data fetching with Supabase for Products 01:02:43 - 01:03:58 - Caching Principles in Next.js 01:03:59 - 01:05:45 - Incremental Static Regeneration in Next.js 01:05:46 - 01:06:52 - Supabase Top Products Query with Filters 01:06:53 - 01:09:22 - Special Files - Not Found Page in Next.js 01:09:23 - 01:11:03 - Integrate Link Component in Next.js 01:11:04 - 01:12:47 - Dynamic Routes in Next.js 01:12:48 - 01:14:22 - Routing Diagrams to Connect the Dots 01:14:23 - 01:16:25 - Let’s build the Product Page 01:16:26 - 01:21:17 - Pre-building Routes on demand in Next.js 01:21:18 - 01:22:14 - Server Actions and Mutations 01:22:15 - 01:24:17 - Let’s create a Server Action for Uploading Products 01:24:18 - 01:28:13 - Use TypeScript First Schema Validation Library Zod 01:28:14 - 01:30:29 - Handle Complex Form Errors in Next.js 01:30:30 - 01:34:16 - Insert Product Images in Supabase Database 01:34:17 - 01:36:20 - Insert Product Data in Supabase Database 01:36:21 - 01:38:04 - Supabase Policy for Storing Images 01:38:05 - 01:39:34 - Purging Cache in Server Actions 01:39:35 - 01:40:23 - Redirect User in Server Actions 01:40:24 - 01:42:58 - Show Loading State in Server Actions 01:42:59 - 01:44:45 - What is SEO? Why is it important? 01:44:46 - 01:46:03 - Characteristics of a High Ranked Site 01:46:04 - 01:47:20 - Pre-Rendering in Next.js 01:47:21 - 01:51:31 - Metadata API in Next.js 01:51:32 - 01:56:49 - Dynamic Metadata for SEO in Next.js 01:56:50 - 01:58:49 - Font Optimizations in Next.js 01:58:50 - 02:00:02 - Application Cleanup 02:00:03 - End of Course 🔗 RESOURCES: 💌 Frontend Newsletter: Frontend Snacks 🍿 https://bit.ly/fesnacks If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else. ✨ FREE Goodies: https://kulkarniankita.com/goodies ☎️ Book a 1:1 coaching session with me Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-ankita 🐤 Find me here Twitter: https://twitter.com/kulkarniankita9/ LinkedIn: https://www.linkedin.com/in/kulkarniankita/