Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Next.js 14 & React - The Complete Guide (incl. App Router)
Getting Started
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
Optional: React Refresher
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)
NextJS Essentials (App Router)
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)
Routing & Page Rendering - Deep Dive
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)
Data Fetching - Deep Dive
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)
Mutating Data - Deep Dive
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)
Understanding & Configuring Caching
Module Introduction (1:09)
Making Sense of NextJS' Caching Types (5:13)
Project Setup (1:45)
Handling Request Memoization (5:31)
Understanding The Data Cache & Cache Settings (5:49)
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)
NextJS App Optimizations
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)
User Authentication
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 (4:51)
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)
Roundup & Next Steps
Course Roundup (1:49)
But There's More NextJS Content! (3:10)
Pages & File-based Routing
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
Project Time: Working with File-based Routing
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
Page Pre-Rendering & Data Fetching
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
Project Time: Page Pre-rendering & Data Fetching
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
Optimizing NextJS Apps
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
Adding Backend Code with API Routes (Fullstack React)
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
Project Time: API Routes
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
Working with App-wide State (React Context)
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
Complete App Example: Build a Full Blog A to Z
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
Deploying NextJS Apps
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
Adding Authentication
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
Optional: NextJS Summary
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 Roundup
Course Roundup (3:57)
Bonus
Adding the "Event Detail" Page (Dynamic Route)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock