Autoplay
Autocomplete
Previous Lesson
Complete and Continue
NextJS & React - The Complete Guide
Getting Started
Welcome to the Course! (1:47)
What Is Next.js? And Why Would You Use It? (4:45)
Key Feature: Server-side Page (Pre-)Rendering (6:38)
Key Feature: File-based Routing (3:13)
Key Feature: Build Fullstack React Apps! (1:50)
Join Our Learning Community!
Creating a NextJS Project & Setting Up Our IDE (6:14)
About the "App Router" (2:47)
Analyzing The Created Project (2:52)
A First Demo: NextJS In Action! (4:35)
About This Course & Course Outline (7:04)
Taking This Course: Your Two Options (4:11)
How To Get The Most Out Of This Course (4:49)
Downloading the Course Code
Module Resources
The Academind Pro Referral Program
Optional: React Refresher
Module Introduction (1:27)
What is ReactJS? (3:47)
Why ReactJS & A First Demo (7:25)
Building Single-Page Applications (SPAs) (2:00)
React Alternatives (3:06)
Creating a New React Project (8:15)
Setting Up A Code Editor (3:04)
Diving Into The Created Project (6:31)
How React Works & Understanding Components (7:36)
More Component Work & Styling With CSS Classes (5:34)
Building & Re-using Components (7:19)
Passing Data With Props & Dynamic Content (5:17)
Handling Events (6:40)
Adding More Components (5:40)
Introducing State (8:18)
Working with "Event Props" (7:07)
Adding Routing (16:52)
Adding Links & Navigation (5:20)
Scoping Component Styles With CSS Modules (5:45)
Outputting Lists Of Data & Components (5:49)
Adding Even More Components (9:47)
Creating "Wrapper" Components (8:39)
Working With Forms (8:58)
Getting User Input & Handling Form Submission (9:45)
Preparing The App For Http Requests & Adding a Backend (6:51)
Sending a POST Http Request (5:18)
Navigating Programmatically (3:41)
Getting Started with Fetching Data (9:24)
Using the "useEffect" Hook (10:07)
Introducing React Context (11:02)
Updating State Based On Previous State (5:54)
Using Context In Components (12:10)
More Context Usage (6:54)
Module Summary (1:00)
Module Resources
Pages & File-based Routing
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
A First Demo: NextJS In Action!
Download
Complete and Continue