Next.js & React - The Complete Guide (incl. App Router)
Learn NextJS from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!
About This Course
Welcome to "Next.js - The Complete Guide"!
Join this bestselling Next.js course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & Next.js!
This course covers both the NextJS "App Router" & the "Pages Router" - two different approaches for building fullstack apps with React!
I created the bestselling Udemy course on React, now I'm super excited to share this Next.js course with you - an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!
Next.js is the production-ready, fullstack-capable framework for ReactJS - the most popular JavaScript library you can learn these days! NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!
Why Learn Next.js?
NextJS is growing fast and therefore in high demand. NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!
What's in This Course?
This course will take you from NextJS beginner to advanced level in no time! We'll start at the very basics and dive into all the core features that make up NextJS.
Fullstack React Apps
Build fullstack React apps (frontend + backend code combined in one project) with ease. Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend.
Server-Side Rendering
Master different forms of page pre-rendering and server-side rendering. Pre-generate dynamic and static pages for optimal performance and SEO.
File-Based Routing
Work with file-based routing, dynamic routes and catch-all routes. Learn both the App Router and Pages Router approaches.
Authentication
NextJS simplifies authentication and makes user signup, sign in and session management very convenient. Learn to add auth to your apps!
In Detail, You'll Learn
This course covers everything you need to build production-ready Next.js applications with multiple real projects where all concepts are applied step-by-step.
Core Concepts
Master these essential NextJS skills:
- What is NextJS & why would you use it?
- Creating NextJS projects from the ground up
- Working with file-based routing
- Adding dynamic routes and catch-all routes
- Page pre-rendering & server-side rendering
- Working with data fetching & pre-fetching
Advanced Topics
Take your skills to the next level:
- Handling form submissions with Server Actions
- Handling file upload
- Adding metadata & optimizations to pages
- Optimizing images with the NextJS Image component
- Building fullstack apps with API routes
- Adding authentication to NextJS apps
Bonus: Summary Modules Included!
This course includes a "NextJS Summary" module for the Pages Router and a "NextJS Essentials" module for the App Router - allowing you to always come back and refresh your knowledge without going through the full course again. Or just take those summary modules to learn all core features in as little time as possible!
Multiple Complete Apps Included!
This course includes multiple complete apps where you'll apply all core concepts! After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!
Basic React Knowledge Needed
See The Course In Action
Curriculum
- Welcome To The Course! (1:20)
- What Is NextJS? Why Would You Use It? (2:20)
- Key Features & Benefits Of NextJS (2:40)
- Creating a First NextJS App (4:25)
- NextJS vs "Just React" - Analyzing The NextJS Project (2:30)
- Editing The First App (2:21)
- Pages Router vs App Router - One Framework, Two Approaches (2:29)
- How To Get The Most Out Of This Course (3:05)
- Learning Community & Course Resources
- The Academind Pro Referral Program
- Using the Code Snasphots
- Module Introduction (1:08)
- What Is React & Why Would You Use It? (5:37)
- React Projects - Requirements (2:09)
- Creating React Projects (3:27)
- Our Starting Project (3:28)
- Understanding How React Works (7:46)
- Building A First Custom Component (11:15)
- Outputting Dynamic Values (5:03)
- Reusing Components (6:00)
- Passing Data to Components with Props (6:15)
- CSS Styling & CSS Modules (10:07)
- Exercise & Another Component (6:31)
- Preparing the App For State Management (3:46)
- Adding Event Listeners (7:52)
- Working with State (10:00)
- Lifting State Up (9:08)
- The Special "children" Prop (7:21)
- State & Conditional Content (8:59)
- Adding a Shared Header & More State Management (7:51)
- Adding Form Buttons (3:34)
- Handling Form Submission (6:18)
- Updating State Based On Previous State (5:30)
- Outputting List Data (6:39)
- Adding a Backend to the React SPA (6:10)
- Sending a POST HTTP Request (4:12)
- Handling Side Effects with useEffect() (9:06)
- Handle Loading State (4:23)
- Understanding & Adding Routing (3:55)
- Adding Routes (5:36)
- Working with Layout Routes (4:08)
- Refactoring Route Components & More Nesting (5:35)
- Linking & Navigating (8:09)
- Data Fetching via loader()s (9:07)
- Submitting Data with action()s (11:08)
- Dynamic Routes (8:41)
- Module Summary (1:25)
- Module Introduction (1:20)
- Starting Setup (2:32)
- Understanding File-based Routing & React Server Components (2:45)
- Adding Another Route via the File System (3:06)
- Navigating Between Pages - Wrong & Right Solution (4:12)
- Working with Pages & Layouts (3:22)
- Reserved File Names, Custom Components & How To Organize A NextJS Project (6:31)
- Reserved Filenames
- Configuring Dynamic Routes & Using Route Parameters (6:17)
- Onwards to the Main Project: The Foodies App (1:24)
- Exercise: Your Task (2:03)
- Exercise: Solution (8:19)
- Revisiting The Concept Of Layouts (3:50)
- Adding a Custom Component To A Layout (5:58)
- Styling NextJS Project: Your Options & Using CSS Modules (6:00)
- Optimizing Images with the NextJS Image Component (4:57)
- Using More Custom Components (3:48)
- Populating The Starting Page Content (4:18)
- Preparing an Image Slideshow (3:25)
- React Server Components vs Client Components - When To Use What (8:15)
- Using Client Components Efficiently (11:07)
- Outputting Meals Data & Images With Unknown Dimensions (10:31)
- Setting Up A SQLite Database (3:11)
- Fetching Data By Leveraging NextJS & Fullstack Capabilities (7:17)
- Adding A Loading Page (4:00)
- Using Suspense & Streamed Responses For Granular Loading State Management (5:54)
- Handling Errors (5:22)
- Handling "Not Found" States (1:57)
- Loading & Rendering Meal Details via Dynamic Routes & Route Parameters (11:04)
- Throwing Not Found Errors For Individual Meals (2:03)
- Getting Started with the "Share Meal" Form (1:53)
- Adding an Image Preview to the Picker (6:00)
- Getting Started with a Custom Image Picker Input Component (8:28)
- Improving the Image Picker Component
- Introducing & Using Server Actions for Handling Form Submissions (9:02)
- Storing Server Actions in Separate Files (3:45)
- Creating a Slug & Sanitizing User Input for XSS Protection (3:20)
- Storing Uploaded Images & Storing Data in the Database (12:56)
- Managing the Form Submission Status with useFormStatus (5:30)
- Adding Server-Side Input Validation (5:54)
- Working with Server Action Responses & useFormState (8:05)
- Building For Production & Understanding NextJS Caching (6:06)
- Triggering Cache Revalidations (3:57)
- Don't Store Files Locally On The Filesystem! (2:13)
- Bonus: Storing Uploaded Images In The Cloud (AWS S3)
- Adding Static Metadata (3:47)
- Adding Dynamic Metadata (2:20)
- Module Summary (4:25)
- Module Introduction (1:37)
- Project Setup, Overview & An Exercise! (4:17)
- Exercise Solution - Part 1 (7:17)
- Exercise Solution - Part 2 (4:56)
- App Styling & Using Dummy Data (8:59)
- Handling "Not Found" Errors & Showing "Not Found" Pages (4:39)
- Setting Up & Using Parallel Routes (6:40)
- Working with Parallel Routes & Nested Routes (12:50)
- Configuring Catch-All Routes (6:01)
- Catch-All Fallback Routes & Dealing With Multiple Path Segments (9:21)
- Throwing (Route-related) Errors (3:38)
- Handling Errors With Error Pages (3:02)
- Server vs Client Components (10:10)
- Nested Routes Inside Dynamic Routes (4:56)
- Intercepting Navigation & Using Interception Routes (5:11)
- Combining Parallel & Intercepting Routes (7:42)
- Navigating Programmatically (2:42)
- Using & Understanding Route Groups (6:39)
- Building APIs with Route Handlers (5:15)
- Using Middleware (5:40)
- Module Summary (0:30)
- Module Introduction (0:56)
- Adding a Backend (2:46)
- Option 1: Client-side Data Fetching (8:50)
- Option 2: Server-side Data Fetching (5:36)
- Why Use A Separate Backend? Fetching Directly From The Source! (6:14)
- Showing a "Loading" Fallback (4:50)
- Migrating An Entire Application To A Local Data Source (Database) (13:19)
- Granular Data Fetching With Suspense (11:35)
- Module Introduction (1:11)
- Starting Project & Analyzing Mutation Options (5:46)
- Setting Up A Form Action (9:19)
- Creating a Server Action (4:16)
- Storing Data in Databases (4:39)
- Providing User Feedback with The useFormStatus Hook (6:04)
- Validating User Input With Help Of The useFormState Hook (9:57)
- Adjusting Server Actions for useFormState (7:40)
- Storing Server Actions In Separate Files (3:57)
- "use server" Does Not Guarantee Server-side Execution!
- Uploading & Storing Images (8:13)
- Alternative Ways of Using, Configuring & Triggering Server Actions (11:00)
- Revalidating Data To Avoid Caching Problems (4:45)
- Performing Optimistic Updates With NextJS (11:42)
- Caching Differences: Development vs Production (6:13)
- Module Introduction (1:09)
- Making Sense of NextJS' Caching Types (6:39)
- Project Setup (1:45)
- Handling Request Memoization (5:31)
- Understanding The Data Cache & Cache Settings (7:31)
- Controlling Data Caching (5:27)
- Making Sense Of The Full Route Cache (4:42)
- On-Demand Cache Invalidation with revalidatePath & revalidateTag (6:03)
- Setting Up Request Memoization For Custom Data Sources (7:15)
- Setting Up Data Caching For Custom Data Sources (3:44)
- Invalidating Custom Data Source Data (3:32)
- Module Summary (1:44)
- Module Introduction (3:08)
- Using the NextJS Image Component (3:43)
- Understanding the NextJS Image Component (5:15)
- Controlling the Image Size (4:45)
- Working with Priority Images & More Settings (3:03)
- Loading Unknown Images (4:12)
- Configuring CSS For Images With The "fill" Prop (3:03)
- Using An Image Loader & Cloudinary Resizing (15:51)
- Page Metadata - An Introduction (1:04)
- Configuring Static Page Metadata (2:57)
- Configuring Dynamic Page Metadata (5:03)
- Understanding Layout Metadata (1:38)
- Module Introduction (1:04)
- Project Setup (3:26)
- User Signup: Extracting & Validating User Input (14:35)
- Storing Users in a Database - The Wrong Way (4:30)
- Hashing Passwords & Storing User Data The Right Way (2:07)
- Checking for Email Duplication (5:01)
- Theory: How Does User Authentication Work? (5:21)
- Choosing a Third-Party Auth Package (Lucia) (2:54)
- Creating a New Lucia Auth Instance (4:32)
- Configuring A Session & A Session Cookie (6:11)
- Setting Up An Auth Session (3:44)
- Verifying An Active Auth Session (7:15)
- Protecting Routes Against Unauthenticated Access (3:07)
- Switching Auth Modes With Query Parameters (Search Params) (5:35)
- Adding User Login (via a Server Action) (5:34)
- Triggering Different Server Actions via Query Parameters (3:44)
- Adding an Auth-only Layout (3:41)
- One Root Layout vs Multiple Root Layouts
- Adding User Logout (4:10)
- From App Router To Pages Router (1:40)
- Using The Code Snapshots
- Module Introduction (1:12)
- Our Starting Setup (1:19)
- What Is "File-based Routing"? And Why Is It Helpful? (5:22)
- Adding A First Page (4:01)
- Adding a Named / Static Route File (1:34)
- Working with Nested Paths & Routes (3:33)
- Adding Dynamic Paths & Routes (4:54)
- Extracting Dynamic Path Segment Data (Dynamic Routes) (4:54)
- Building Nested Dynamic Routes & Paths (7:12)
- Adding Catch-All Routes (5:44)
- Navigating with the "Link" Component (5:44)
- Navigating To Dynamic Routes (3:41)
- A Different Way Of Setting Link Hrefs (2:55)
- Navigating Programmatically (3:50)
- Adding a Custom 404 Page (1:35)
- Module Summary (5:51)
- Module Resources
- Module Introduction (2:04)
- Planning The Project (4:15)
- Setting Up The Main Pages (7:35)
- Adding Dummy Data & Static Files (4:46)
- Adding Regular React Components (7:14)
- Adding More React Components & Connecting Components (10:22)
- Styling Components In Next.js Projects (9:28)
- Adding Buttons & Icons (8:25)
- Adding the "Event Detail" Page (Dynamic Route) (8:31)
- Adding a General Layout Wrapper Component (6:27)
- Working on the "All Events" Page (2:05)
- Adding a Filter Form for Filtering Events (8:25)
- Navigating to the "Filtered Events" Page Progammatically (8:25)
- Extracting Data on the Catch-All Page (8:54)
- Final Steps (7:02)
- Module Summary (1:40)
- Module Resources
- Module Introduction (2:25)
- The Problem With Traditional React Apps (and Data Fetching) (5:15)
- How NextJS Prepares & Pre-renders Pages (5:38)
- Introducing Static Generation with "getStaticProps" (4:04)
- NextJS Pre-renders By Default! (3:08)
- Adding "getStaticProps" To Pages (6:39)
- Running Server-side Code & Using the Filesystem (7:41)
- A Look Behind The Scenes (5:19)
- Utilizing Incremental Static Generation (ISR) (7:22)
- ISR: A Look Behind The Scenes (3:45)
- A Closer Look At "getStaticProps" & Configuration Options (4:19)
- Working With Dynamic Parameters (9:46)
- Introducing "getStaticPaths" For Dynamic Pages (3:43)
- Using "getStaticPaths" (3:26)
- "getStaticPaths" & Link Prefetching: Behind The Scenes (3:59)
- Working With Fallback Pages (5:27)
- Loading Paths Dynamically (4:02)
- Fallback Pages & "Not Found" Pages (5:53)
- Introducing "getServerSideProps" for Server-side Rendering (SSR) (4:13)
- Using "getServerSideProps" for Server-side Rendering (4:05)
- "getServerSideProps" and its Context (4:20)
- Dynamic Pages & "getServerSideProps" (4:04)
- "getServerSideProps": Behind The Scenes (3:24)
- Introducing Client-Side Data Fetching (And When To Use It) (3:40)
- Implementing Client-Side Data Fetching (14:47)
- Using the "useSWR" NextJS Hook (8:58)
- Combining Pre-Fetching With Client-Side Fetching (8:55)
- Module Summary (6:45)
- Module Resources
- Module Introduction (1:04)
- Preparations (5:01)
- Adding Static Site Generation (SSG) On The Home Page (11:02)
- Loading Data & Paths For Dynamic Pages (9:50)
- Optimizing Data Fetching (7:47)
- Working on the "All Events" Page (2:47)
- Using Server-side Rendering (SSR) (9:52)
- Adding Client-Side Data Fetching (10:55)
- Module Summary (1:30)
- Module Resources
- Module Summary (1:19)
- Analyzing the Need for "head" Metadata (1:49)
- Configuring the "head" Content (3:41)
- Adding Dynamic "head" Content (5:17)
- Reusing Logic Inside A Component (4:22)
- Working with the "_app.js" File (and Why) (3:03)
- Merging "head" Content (3:17)
- The "_document.js" File (And What It Does) (5:31)
- A Closer Look At Our Images (1:59)
- Optimizing Images with the "Next Image" Component & Feature (8:37)
- Taking A Look At The "Next Image" Documentation (0:51)
- Module Summary (1:16)
- Module Resources
- Module Introduction (0:50)
- What are "API Routes"? (5:37)
- Writing Our First API Route (8:24)
- Preparing the Frontend Form (6:29)
- Parsing The Incoming Request & Executing Server-side Code (10:16)
- Sending Requests To API Routes (5:43)
- Using API Routes To Get Data (7:56)
- Using API Routes For Pre-Rendering Pages (8:04)
- Creating & Using Dynamic API Routes (13:41)
- Exploring Different Ways Of Structuring API Route Files (5:09)
- Module Summary (1:44)
- Module Resources
- Module Introduction (1:31)
- Starting Setup & A Challenge For You! (5:15)
- Adding a Newsletter Route (11:10)
- Adding Comments API Routes (8:43)
- Connecting the Frontend To the Comments API Routes (10:59)
- Setting Up A MongoDB Database (5:42)
- Running MongoDB Queries From Inside API Routes (9:14)
- Inserting Comments Into The Database (6:26)
- Getting Data From The Database (4:31)
- Improvement: Getting Comments For A Specific Event Only
- Adding Error Handling (7:33)
- More Error Handling (10:47)
- A Final Note On MongoDB Connections
- Module Summary (1:45)
- Module Resources
- Module Introduction (1:27)
- Our Target State & Starting Project (4:32)
- Creating a New React Context (5:37)
- Adding Context State (3:49)
- Using Context Data In Components (4:37)
- Example: Triggering & Showing Notifications (6:35)
- Example: Removing Notifications (Automatically) (6:31)
- Challenge Solution (7:22)
- Module Summary (1:09)
- Module Resources
- Module Introduction (2:59)
- Setting Up The Core Pages (5:10)
- Getting Started With The Home Page (5:29)
- Adding The "Hero" Component (8:47)
- Adding Layout & Navigation (8:45)
- Time To Add Styling & A Logo (3:18)
- Starting Work On The "Featured Posts" Part (5:47)
- Adding A Post Grid & Post Items (9:40)
- Rendering Dummy Post Data (12:25)
- Adding the "All Posts" Page (3:59)
- Working On The "Post Detail" Page (10:10)
- Rendering Markdown As JSX (2:30)
- Adding Markdown Files As A Data Source (7:32)
- Adding Functions To Read & Fetch Data From Markdown Files (13:40)
- Using Markdown Data For Rendering Posts (8:19)
- Rendering Dynamic Post Pages & Paths (11:42)
- Rendering Custom HTML Elements with React Markdown
- Rendering Images With The "Next Image" Component (From Markdown) (12:46)
- Rendering Code Snippets From Markdown (6:29)
- Preparing The Contact Form (4:18)
- Adding The Contact API Route (4:26)
- Sending Data From The Client To The API Route (7:26)
- Storing Messages With MongoDB In A Database (8:52)
- Adding UI Feedback With Notifications (15:05)
- Adding "head" Data (6:52)
- Adding A "_document.js" File (2:55)
- Using React Portals (3:45)
- Module Summary (1:24)
- Module Resources
- Module Introduction (1:17)
- Building NextJS Apps: Your Options (8:05)
- Key Deployment Steps (3:06)
- Checking & Optimizing Our Code (3:11)
- The NextJS Config File & Working With Environment Variables (14:25)
- Running a Test Build & Reducing Code Size (7:21)
- A Full Deployment Example (To Vercel) (17:40)
- A Note On Github & Secret Credentials (1:57)
- Using the "export" Feature (2:16)
- Module Summary (0:38)
- Module Resources
- Module Introduction (1:16)
- Our Starting Project (1:44)
- How Does Authentication Work (In React & NextJS Apps)? (14:23)
- Must-read: Install the right next-auth Version!
- Using The "next-auth" Library (3:04)
- Adding A User Signup API Route (12:59)
- Sending Signup Requests From The Frontend (9:41)
- Improving Signup With Unique Email Addresses (3:00)
- Adding the "Credentials Auth Provider" & User Login Logic (14:08)
- Sending a "Signin" Request From The Frontend (6:52)
- Managing Active Session (On The Frontend) (5:57)
- Adding User Logout (2:18)
- Adding Client-Side Page Guards (Route Protection) (7:50)
- Adding Server-Side Page Guards (And When To Use Which Approach) (7:41)
- Protecting the "Auth" Page (5:46)
- Using the "next-auth" Session Provider Component (5:14)
- Analyzing Further Authentication Requirements (3:42)
- Protecting API Routes (6:37)
- Adding the "Change Password" Logic (10:36)
- Sending a "Change Password" Request From The Frontend (9:16)
- Module Summary & Final Steps (3:29)
- Module Resources
- Module Introduction (3:03)
- What is NextJS? (4:45)
- Key Feature: Server-side (Pre-) Rendering of Pages (6:38)
- Key Feature: File-based Routing (3:13)
- Key Feature: Build Fullstack Apps With Ease (1:50)
- Creating a NextJS Project & IDE Setup (6:14)
- About the "App Router" (2:47)
- Analyzing the Created Project (2:52)
- Adding First Pages To The Project (6:05)
- Adding Nested Pages / Paths (3:47)
- Creating Dynamic Pages (3:36)
- Extracting Dynamic Route Data (4:07)
- Linking Between Pages (7:13)
- Onwards To A Bigger Project! (3:32)
- Preparing Our Project Pages (3:42)
- Rendering A List Of (Dummy) Meetups (5:03)
- Adding A Form For Adding Meetups (3:54)
- The "_app.js" File & Wrapper Components (6:17)
- Programmatic Navigation (3:47)
- Adding Custom Components & Styling With CSS Modules (10:00)
- How NextJS Page Pre-Rendering Actually Works (5:52)
- Introducing Data Fetching For Page Generation (getStaticProps) (8:56)
- More Static Site Generation (SSG) With getStaticProps (5:44)
- Exploring getServerSideProps (6:27)
- Working With Dynamic Path Params In getStaticProps (5:14)
- Dynamic Pages & getStaticProps & getStaticPaths (7:16)
- Introducing API Routes (6:20)
- Connecting & Querying a MongoDB Database (9:32)
- Sending HTTP Requests To API Routes (6:49)
- Getting Data From The Database (For Page Pre-Rendering) (7:09)
- Getting Meetup Detail Data & Paths (9:41)
- Adding "head" Metadata To Pages (9:19)
- Deploying NextJS Projects (12:26)
- Working With Fallback Pages & Re-Deploying (4:13)
- Module Summary (2:15)
- Module Resources
Course Prerequisites
Here's what you need to get the most out of this course
- ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module!
- NO prior NextJS knowledge is required
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 8035 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "Next.js & React - The Complete Guide (incl. App Router)"
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.