Next.js 16 Full Stack Course (8+ hrs) 🚀

Next.js is one of the most powerful React frameworks available and with the release of Next.js 16, it just got even better. New features like Cache Components make apps faster and more efficient than ever. In this video, we’ll take a complete deep dive into Next.js, and you’ll learn everything from A to Z. We’ll build a full production-ready application from scratch while exploring routing, server components, authentication, data fetching, real-time updates, caching, deployment, and much more. This won’t be just a light overview, we’ll dive deep into the dynamics of Next.js while creating a powerful and fully optimized web application.

🚀 Try out Convex for FREE: https://convex.link/JanMarshall

📸 Screen Recording Software: https://dub.sh/eDa47SO
🔒 My favorite Auth Solution: https://dub.sh/xeU8r3v

⌨️ GitHub Repo: https://www.marshalcode.com/free-tutorials/nextjs-16-full-stack-course-8-hours-auth-caching-server-actions-more
🌍 My Website: https://marshalcode.com/
👋🏻 Discord: https://discord.gg/ZzGqgpmd24
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: jan@alenix.de

Timestamps:
00:00 Intro
03:42 Next.js Overview
11:00 Project Directory Overview
15:00 Routing (Pages & Layouts)
25:00 Linking & Navigation
29:00 Dynamic Routes
36:00 Getting Started with the Navbar
44:00 Setting Up Component Library (shadcn/ui)
58:00 Route Groups
01:05:00 Continuing with Auth Pages
01:10:00 Form Validation (Zod & RHF)
01:15:00 Server Components & Client Components
01:32:00 Traditional Backend Setup
01:45:00 Setting Up Our BaaS
01:51:00 Public & Private Environments
02:00:00 Setting Up Authentication (Better Auth)
02:21:00 Creating the Login Page
02:29:00 Programmatically Redirecting Users
02:37:00 Blog Creation Route
02:49:00 Creating the Database Schema
02:55:00 Creating First Server Function (Endpoint)
03:05:00 Client-Side Mutation
03:09:00 Server Actions (Server-Side Mutations)
03:19:00 Route Handlers (API Endpoints)
03:26:00 Continuing with Server Actions (Validation, AuthZ, etc.)
03:40:00 Creating Query Server Function
03:45:00 Fetching Data on the Client Side
03:47:00 Common Misconceptions with Client Components
04:00:00 Image Optimization (Image Component)
04:17:00 Fetching Data on the Server Side (Server Components)
04:26:00 Streaming with React Suspense
04:41:00 Image Uploads (Presigned URL)
05:00:00 Serving Uploaded Images
05:06:00 Next.js Caching Deep Dive
05:20:00 Revalidating Cached Data
05:28:00 Dynamic Post ID Route
05:45:00 Realtime Comments Section
06:00:00 Accessing Params on the Client Side
06:20:00 SSR + Hydration = Reactivity
06:25:00 Metadata (Static and Dynamic)
06:50:00 Presence (Realtime)
07:09:00 Next.js Proxy (Security)
07:17:00 Multi-Layered Authorization
07:27:00 Cache Components (PPR)
07:56:00 Global Search
08:26:00 Deployment