Next.js Complete Course – Build Real-World Apps with React & Next 15

Learn Next.js 15 from scratch in this complete tutorial and build a real-world e-commerce application step by step. This full course will help you become a confident web developer using Next.js, one of the most popular React frameworks for modern, high-performance web applications. Next.js is widely used in AI-powered tools and workflows, so if you work with tools like Cursor, Lovable, or GitHub Copilot, learning Next.js will give you full control over how those tools generate, structure, and scale your projects. By the end of this course, you’ll understand: - How Next.js works under the hood - Client vs Server Components - Routing, layouts, and data fetching - State management with Context API - Error handling, loading states, and pagination - Deploying Next.js apps with Vercel 🔧 PREREQUISITES - Basic knowledge of HTML, CSS, JavaScript, and React 🔗 PROJECT RESOURCES 🌍 Live Preview – The Final Project You Will Build https://next-js-couse-shopping-bag.vercel.app/ 📘 Next.js Official Documentation https://nextjs.org/docs 🎨 Figma Prototype: https://www.figma.com/proto/wXK5qKEscfTDtUOtR7YdZg/Next-JS-Shopping?node-id=0-1&t=txTI7qliO5ug8bUs-1 🎨 CSS Styles Repository: https://github.com/ivanlourencogomes/css-for-next-js-shopping-bag 🖼 Hero & Logo Images: https://drive.google.com/file/d/1MC0RJcnyPIOFpBX19pct_ZzhIBrfX9OF/view?usp=sharing 🧪 Dummy JSON API: https://dummyjson.com/ 💻 Final Project Repository: https://github.com/ivanlourencogomes/next-js-couse-shopping-bag 🔍 KEYWORDS AND TOPICS COVERED #Nextjs #NextjsTutorial #NextjsCourse #React #ReactFramework #WebDevelopment #FrontendDevelopment #JavaScript #AIWebDevelopment #Vercel #FullStackDevelopment 🕒 CHAPTERS 00:00:00 Course Introduction 00:01:19 Creating Your First Next.js Application 00:05:41 Installing ES7+ React and JavaScript Nightly Extensions 00:09:04 Understanding the File and Folder Structure 00:15:36 Working with the Layout File 00:18:56 Styling Next.js Apps with CSS Modules 00:25:56 Creating Custom Components 00:32:36 CSS Code for the Project 00:36:19 Styling the Header Component 00:44:17 Using Multiple Classes with CSS Modules 00:47:17 Working with the Next.js Image Component 00:56:43 Working with the Next.js Link Component 00:59:54 Importing Google Fonts 01:05:59 Finalizing the Homepage Styles 01:14:39 Fetching Data in Next.js 01:21:09 Creating Product Cards 01:31:53 Configuring Remote Image Patterns (Next.js Image) 01:35:46 Working with URL Parameters 01:43:39 Building the Individual Product Page 01:51:14 Understanding Client vs Server Components 01:58:27 State Management in Next.js Applications 02:02:48 Creating and Providing Context with the Context API 02:09:21 Reading Data from Context 02:13:27 Creating the Shopping Bag Count Component 02:18:32 Mutating Application State 02:24:56 Removing Items from the Shopping Bag 02:31:18 Handling Product Quantities 02:42:14 Updating Quantities in the Basket 02:47:02 Adding the Shopping Bag Page 02:53:19 Reading the Context from the Basket Page 02:56:51 Displaying Items in the Basket 03:04:23 Setting Up Product Actions 03:10:41 Calculating the Order Total 03:14:41 Creating a Price Formatting Utility Function 03:20:33 Clearing the Basket 03:28:18 Persisting Basket Items in Local Storage 03:35:41 The Importance of Error Handling in Next.js 03:38:35 Using the error.js Template File 03:43:15 Customizing the Error Page 03:50:45 Using Error Boundaries for Component Errors 03:58:01 Refactoring Products and Cards into Smaller Components 04:05:58 Customizing the 404 Page 04:10:49 Adding Loading States for Routable Pages 04:18:19 Adding Loading States with React Suspense 04:24:17 Starting the Products Page 04:33:30 Handling Loading and Error States on the Products Page 04:36:31 Creating a Paginated Products List 04:43:12 Loading More Products on Demand 04:51:59 Handling Error and Loading States in the Paginated List 04:59:15 Adding URL Parameters for Product Categories 05:04:48 Fetching Filtered Categories 05:10:33 Adding the Category Filter 05:17:38 Changing Product Categories 05:22:58 Creating a Git Repository for the Project 05:30:15 Deploying a Next.js Application with Vercel 05:32:56 Deploying New Versions of the Website 05:37:40 Publishing New Features to a Test Environment 05:48:14 Rolling Back Releases on Vercel 05:51:16 Video Ending I’m Ivan Lourenço Gomes, and on Daweb Schools I create in-depth, practical tutorials to help you master web development, AI, and modern technology. If this course helped you, consider subscribing to the channel and liking the video. It really helps the channel grow and allows me to keep publishing high-quality, free content. Thanks for watching, and I’ll see you in the next lesson