Master Next.Js 15 - The Missing Guide

Learn Next 15 Practical Way Building a Full-Stack E-Commerce App with Stripe, Prisma, Postgres, Auth.js and shadcn/ui

What you'll learn

Build production-ready e-commerce apps using Next.js 15 App Router, Server Components, and modern full-stack patterns

Master Prisma ORM with PostgreSQL for type-safe database operations, complex relationships, and efficient queries

Implement Stripe payment processing, NextAuth.js authentication, and user account management with order history

Deploy Next.js 15 apps to production with SEO optimization, ISR caching, error handling, and performance best practices

Requirements

Basic React knowledge (components, hooks, props)

No Next.js experience needed - you'll learn everything from App Router fundamentals to advanced patterns

Description

Build Production-Ready Next.js 15 Applications That ScaleStop learning Next.js through disconnected tutorials. Master the entire framework by building one comprehensive e-commerce platform that demonstrates every essential Next.js 15 pattern.What You'll BuildA complete e-commerce application featuring:Product catalog with server-side pagination and category filteringDynamic product pages with SEO optimization and static generationShopping cart with persistent state and Server ActionsUser authentication system with NextAuth.jsOrder management with Stripe payment integrationProtected user accounts with order historyMobile-responsive design with modern UI componentsMaster Next.js 15's Core FeaturesApp Router & Rendering PatternsServer Components for fast initial page loads and SEOClient Components for interactive UI elementsStatic Site Generation with generateStaticParamsIncremental Static Regeneration for cached content updatesStreaming with Suspense for progressive loadingAdvanced Data HandlingServer Actions replacing traditional API routesPrisma ORM with complex database relationshipsType-safe database queries with full TypeScript integrationEfficient caching strategies using Next.js built-in toolsProduction-Ready FeaturesDynamic SEO with generateMetadata and structured dataPayment processing with Stripe checkout sessions and webhooksAuthentication & authorization with role-based accessError handling and loading statesProduction deployment to Vercel with PostgreSQLComplete Tech Stack You'll MasterNext.js 15: App Router, Server Components, Server Actions, ISRTypeScript: End-to-end type safetyPrisma & PostgreSQL: Modern database layer with relationshipsStripe: Production-ready payment processingNextAuth.js: Complete authentication systemTailwind CSS + Shadcn/UI: Modern component libraryReact Hook Form + Zod: Type-safe form handlingFrom Development to ProductionLearn the complete development lifecycle:Database design and migrations with PrismaPerformance optimization with caching and ISRSEO implementation with metadata and sitemapsProduction builds and deployment strategiesError boundaries and graceful error handlingWho This Course Is ForDevelopers who know React basics but want to master Next.js 15Those tired of toy examples and ready for production patternsAnyone building e-commerce, SaaS, or data-driven applicationsDevelopers who want to understand modern full-stack architectureWhat Makes This DifferentOne comprehensive project that teaches everything interconnected, not isolated features. You'll understand how Server Components, database queries, authentication, and payments work together in a real application.Production-focused: Every pattern taught is one you'll actually use in professional projects.Modern Next.js 15: Built specifically for the latest App Router patterns and Server Components.Ready to build Next.js applications with confidence? Join the course and master the framework through hands-on practice.

Overview

Section 1: Welcome!

Lecture 1 Welcome in the Course!

Lecture 2 The Project Demo

Section 2: Environment Setup

Lecture 3 Section Intro & Objectives

Lecture 4 Project Creation

Lecture 5 Quick Into to Docker & Docker Compose

Lecture 6 VSCode & GitHub Copilot (OPTIONAL)

Lecture 7 Running Postgres Using Docker

Lecture 8 Setting Up Prisma

Lecture 9 Summary & Troubleshooting

Section 3: Product Listing Feature

Lecture 10 File-Based Routing in App Router

Lecture 11 Home Page and Server Components in Next.js

Lecture 12 Type Safety and Mock Data

Lecture 13 Display Products in a Grid

Lecture 14 Powerful Image Component

Lecture 15 Responsive Images

Lecture 16 More Products, Responsive Grid, Lazy Loading

Lecture 17 Format the Price

Lecture 18 Summary

Section 4: Database & Product Data

Lecture 19 Section Intro & Objectives

Lecture 20 Product Model and Migration

Lecture 21 Product & Categories: Relations

Lecture 22 Creating and Running a Seeding Script

Lecture 23 Seeding: Prisma Client, Deleting Data & Inserting Categories

Lecture 24 Seeding: Adding Products

Lecture 25 Next.js Prisma Client Quirk

Lecture 26 Fetching Products in Server Component

Lecture 27 Summary

Section 5: Adding shadcn/ui, Suspense, Pagination

Lecture 28 What is shadcn/ui?

Lecture 29 Setting Up & Understanding shadcn/ui Basics

Lecture 30 Enhancing the Product Card

Lecture 31 What's Loading UI?

Lecture 32 Creating the Loading UI for Products

Lecture 33 Adding Loading Skeleton for Products

Lecture 34 Paginating Products

Lecture 35 Adding Pagination Links

Lecture 36 Search Params & Dynamic APIs

Lecture 37 Using Suspense with searchParams

Lecture 38 Summary

Section 6: Product Page & Dynamic Routes

Lecture 39 Using and Understanding Server Actions

Lecture 40 Dynamic Routes - Product Page

Lecture 41 404 Custom Page

Lecture 42 Loading Category & Improving Product Page UI

Lecture 43 Loading State for Product

Lecture 44 Adding Metadata and SEO Optimization

Lecture 45 Product Page with Images

Lecture 46 Adding Product Inventory

Lecture 47 Product Inventory UI and Image Fix

Lecture 48 Add to Cart Placeholder

Lecture 49 Summary

Section 7: Navigation Layout Enhancements

Lecture 50 Dark and Light Mode: Next Themes

Lecture 51 Implementing Theme Toggle

Lecture 52 Adding Navigation Bar

Lecture 53 Adding Icons to Navigation Bar

Lecture 54 Mobile Only Navigation Menu - Explained

Lecture 55 Creating the Mobile Navigation using Sheet

Lecture 56 Mobile Navigation Content

Lecture 57 Adding Footer and Fixing Layout Issues

Lecture 58 Improving Navigation with Breadcrumbs

Lecture 59 Fixing Layout Issues & Adding Breadcrumbs Skeleton

Lecture 60 Summary

Section 8: Search Feature

Lecture 61 How Search will Work?

Lecture 62 Creating and Placing a Search Input

Lecture 63 Search Input Logic

Lecture 64 Creating a Dummy Search Results Page

Lecture 65 Working Search Feature

Lecture 66 Fixing UI/UX Issues

Section 9: Categories & Product Discovery

Lecture 67 Section Intro & Objectives

Lecture 68 Products by Category Page

Lecture 69 Adding Basic Sorting Feature to Product List

Lecture 70 Category List Sidebar (using Suspense)

Lecture 71 Nested Layout with Categories and Sorting

Lecture 72 A Case for Server/Client Wrapper

Lecture 73 Server Wrapper for CategorySidebar

Lecture 74 Sorting Controls in Layout

Lecture 75 Sorting Working on Search Page

Lecture 76 A Case for Extracting Common Code

Lecture 77 Common ProductList and getProducts Server Action

Lecture 78 Refactoring Pages to use getProducts

Section 10: Cart Feature

Lecture 79 Designing & Migrating the Cart Database Schema

Lecture 80 Cart Feature Strategy: Handling Anonymous Users & Cookies

Lecture 81 Why Custom Types? Typing Our Cart with Prisma's GetPayload

Lecture 82 Finding the Right Cart: Reading Cookies with the getCart Utility

Lecture 83 Starting Fresh: The getOrCreateCart Database Utility

Lecture 84 Adding & Updating Items: The Core addToCart Logic

Lecture 85 Putting it Together: AddToCartButton

Lecture 86 Implementing the Navbar Cart Counter

Lecture 87 Understanding Data Cache and Revalidation

Lecture 88 Cart Counter not Updating? Revalidate Tags

Lecture 89 Suspending Cart Indicator

Section 11: The Cart Page

Lecture 90 Creating the Cart Page

Lecture 91 Creating the CartEntry Component UI

Lecture 92 CartEntry: UI Fixes

Lecture 93 Server Action: setProductQuantity

Lecture 94 Increasing and Decreasing the Cart Item Quantity

Lecture 95 Removing Items from the Basket

Lecture 96 Cart Summary Component

Lecture 97 Adding Loading UI for All Things Cart Related

Section 12: Order Management and Stripe Integration for Checkout

Lecture 98 Section Intro & Objectives

Lecture 99 Order & OrderItem Prisma Schema

Lecture 100 Configuring Stripe

Lecture 101 Why We Need an Order First

Lecture 102 createOrder Server Action

Lecture 103 Stripe Checkout Session - Getting Started

Lecture 104 Implementing createCheckoutSession

Lecture 105 Moving to Complete Checkout Process

Lecture 106 Implementing Checkout Process

Lecture 107 Handling Checkout Errors

Section 13: Finalizing Checkout, Handling Payments, and Stripe Webhooks

Lecture 108 Making the Checkout Form

Lecture 109 Making a Test Payment using Stripe

Lecture 110 Order State & Stripe Redirects Explained

Lecture 111 Payment Cancelled Route Handler

Lecture 112 Payment Sucess Route Handler

Lecture 113 Order Status Page

Lecture 114 Improving Order Page UI

Lecture 115 What is a Stripe Webhook?

Lecture 116 Implementing Stripe Webook Route Handler

Lecture 117 Installing and Running Stripe CLI

Lecture 118 Testing the Stripe Webhook with Stripe CLI

Section 14: User Authentication with Auth.js and Next.js

Lecture 119 About Authentication

Lecture 120 Setting Up the User Database Model

Lecture 121 Installing Auth.js and Basic Setup

Lecture 122 Hashing Passwords

Lecture 123 Seeding Test Users

Lecture 124 Sign In Page - UI Shell

Lecture 125 Auth.js Pages - Login Page

Lecture 126 Setting Up Zod and Sign-in Schema

Lecture 127 Setting Up React Hook Form & Sign-in Form

Lecture 128 Mixing shadcn/ui with React Hook Form

Lecture 129 Credentials Provider Logic

Lecture 130 Understanding the Why: React Hook Form vs Simple Forms

Lecture 131 Connecting Sign-In Form

Section 15: Expanding Authentication: Sign-Up, Session Management, and Access Control

Lecture 132 Sign-In Error Handling

Lecture 133 Current Session, Cookies & JWT Explained

Lecture 134 Session/JWT Callbacks & Augmenting TS Types

Lecture 135 Sign-In and Redirect

Lecture 136 Auth Status UI & Logout

Lecture 137 User Dropdown Menu

Lecture 138 Sign Up Page - UI & Validation

Lecture 139 Fixing User Type

Lecture 140 Sign Up Server Action

Lecture 141 Connecting Sign Up Form & Auto-Login

Lecture 142 Connecting Order with the User

Lecture 143 Testing Making Orders

Lecture 144 Authorization: Displaying User Orders

Lecture 145 Improving Order & My Orders Pages

Section 16: Production Build, Metadata and SEO, Error Handling

Lecture 146 Production Build & Fixing Issues

Lecture 147 Adding Metadata for SEO

Lecture 148 Adding JSON-LD (Structured Data)

Lecture 149 Generating Sitemap (Dynamically)

Lecture 150 Adding robots.txt

Lecture 151 Error Handling and Error Boundaries

Lecture 152 Cleanup: Removing Logs and Making Dynamic Page Fast

Section 17: Optimizing: SSG/ISR and Client Fetching

Lecture 153 Understanding Incremental Static Regeneration (ISR)

Lecture 154 Practical: ISR on Product Page

Lecture 155 Solution: Partial Pre Rendering (PPR) or Client Side Fetching (SWR)?

Lecture 156 Creating the Cart API Route

Lecture 157 SWR and useCart Custom Hook

Lecture 158 Update the Cart Indicator

Lecture 159 Update Cart Mutations

Lecture 160 ISR & SWR: Putting it All Together

Section 18: Optimizing: Dynamic Pages and Cache Strategy

Lecture 161 How To: Optimizing Dynamic Pages

Lecture 162 Smart Caching Keys & Tags

Lecture 163 Optimize: getProducts Function

Lecture 164 Optimize: Add Product Count Cache

Lecture 165 Optimize: Category Cache

Lecture 166 Consistent Caching and an Exercise

Lecture 167 Cache Invalidation Strategy

Section 19: Live Deployment on Vercel

Lecture 168 The Deployment Plan

Lecture 169 Prisma Migrations During Build

Lecture 170 Consistent Caching & Generic Caching Advice (incl. Billing)

Lecture 171 Git & GitHub Crash Course

Lecture 172 Vercel: Deployment & Postgres

Lecture 173 Seeding DB & Redeployment

Lecture 174 Pointing Stripe to Vercel and Making Orders

React developers ready to master Next.js 15 for building professional full-stack applications like e-commerce platforms, SaaS products, or data-driven sites