{getProduct} $button={Entrol Now} $price={$Starting Free Trial} $sale={}
Course content
23 sections • 452 lectures • 40h 19m total length
Welcome To The Course!1:20
What Is NextJS? Why Would You Use It?2:20
Key Features & Benefits Of NextJS2:40
Creating a First NextJS App4:25
NextJS vs "Just React" - Analyzing The NextJS Project2:30
Editing The First App2:21
Pages Router vs App Router - One Framework, Two Approaches2:29
How To Get The Most Out Of This Course3:05
Learning Community & Course Resources0:32
Using the Code Snasphots0:07
Module Introduction1:08
What Is React & Why Would You Use It?5:37
React Projects - Requirements2:09
Creating React Projects3:27
Our Starting Project3:28
Understanding How React Works7:46
Building A First Custom Component11:15
Outputting Dynamic Values5:03
Reusing Components6:00
Passing Data to Components with Props6:15
CSS Styling & CSS Modules10:07
Exercise & Another Component6:31
Preparing the App For State Management3:45
Adding Event Listeners7:52
Working with State10:00
Lifting State Up9:08
The Special "children" Prop7:21
State & Conditional Content8:59
Adding a Shared Header & More State Management7:51
Adding Form Buttons3:34
Handling Form Submission6:18
Updating State Based On Previous State5:30
Outputting List Data6:38
Adding a Backend to the React SPA6:10
Sending a POST HTTP Request4:12
Handling Side Effects with useEffect()9:06
Handle Loading State4:23
Understanding & Adding Routing3:55
Adding Routes5:36
Working with Layout Routes4:08
Refactoring Route Components & More Nesting5:35
Linking & Navigating8:09
Data Fetching via loader()s9:07
Submitting Data with action()s11:07
Dynamic Routes8:41
Module Summary1:25
IMPORTANT -- LEGACY CONTENT BELOW0:21
Module Introduction1:27
What is ReactJS?3:48
Why ReactJS & A First Demo7:25
Building Single-Page Applications (SPAs)2:00
React Alternatives3:06
Creating a New React Project8:15
Setting Up A Code Editor3:04
React 180:53
Diving Into The Created Project6:31
How React Works & Understanding Components7:36
More Component Work & Styling With CSS Classes5:34
Building & Re-using Components7:19
Passing Data With Props & Dynamic Content5:17
Handling Events6:40
Adding More Components5:40
Introducing State8:18
Working with "Event Props"7:07
Use The Right React Router Version0:12
Adding Routing16:52
Adding Links & Navigation5:20
Scoping Component Styles With CSS Modules5:45
Outputting Lists Of Data & Components5:49
Adding Even More Components9:47
Creating "Wrapper" Components8:39
Working With Forms8:58
Getting User Input & Handling Form Submission9:45
Preparing The App For Http Requests & Adding a Backend6:51
Sending a POST Http Request5:18
Navigating Programmatically3:42
Getting Started with Fetching Data9:25
Using the "useEffect" Hook10:07
Introducing React Context11:02
Updating State Based On Previous State5:54
Using Context In Components12:10
More Context Usage6:54
Module Summary1:00
Module Resources0:12
Module Introduction1:20
Starting Setup2:32
Understanding File-based Routing & React Server Components2:45
Adding Another Route via the File System3:06
Navigating Between Pages - Wrong & Right Solution4:12
Working with Pages & Layouts3:22
Reserved File Names, Custom Components & How To Organize A NextJS Project6:31
Reserved Filenames0:46
Configuring Dynamic Routes & Using Route Parameters6:17
Onwards to the Main Project: The Foodies App1:24
Exercise: Your Task2:03
Exercise: Solution8:19
Revisiting The Concept Of Layouts3:50
Adding a Custom Component To A Layout5:58
Styling NextJS Project: Your Options & Using CSS Modules6:00
Optimizing Images with the NextJS Image Component4:57
Using More Custom Components3:48
Populating The Starting Page Content4:18
Preparing an Image Slideshow3:25
React Server Components vs Client Components - When To Use What8:15
Using Client Components Efficiently11:07
Outputting Meals Data & Images With Unknown Dimensions10:31
Setting Up A SQLite Database3:11
Fetching Data By Leveraging NextJS & Fullstack Capabilities7:17
Adding A Loading Page4:00
Using Suspense & Streamed Responses For Granular Loading State Management5:54
Handling Errors5:22
Handling "Not Found" States1:57
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters11:03
Throwing Not Found Errors For Individual Meals2:03
Getting Started with the "Share Meal" Form1:53
Getting Started with a Custom Image Picker Input Component8:28
Adding an Image Preview to the Picker5:59
Improving the Image Picker Component0:17
Introducing & Using Server Actions for Handling Form Submissions9:02
Storing Server Actions in Separate Files3:45
Creating a Slug & Sanitizing User Input for XSS Protection3:20
Storing Uploaded Images & Storing Data in the Database12:56
Managing the Form Submission Status with useFormStatus5:30
Adding Server-Side Input Validation5:54
Using useFormState()0:19
Working with Server Action Responses & useFormState8:05
Building For Production & Understanding NextJS Caching6:06
Triggering Cache Revalidations3:57
Don't Store Files Locally On The Filesystem!2:13
Bonus: Storing Uploaded Images In The Cloud (AWS S3)6:51
Adding Static Metadata3:47
Adding Dynamic Metadata2:20
Module Summary4:25
Module Introduction1:37
Project Setup, Overview & An Exercise!4:17
Exercise Solution - Part 17:17
Exercise Solution - Part 24:56
App Styling & Using Dummy Data8:59
Handling "Not Found" Errors & Showing "Not Found" Pages4:39
Setting Up & Using Parallel Routes6:40
Working with Parallel Routes & Nested Routes12:50
Configuring Catch-All Routes6:01
Catch-All Fallback Routes & Dealing With Multiple Path Segments9:21
Throwing (Route-related) Errors3:38
Handling Errors With Error Pages3:02
Server vs Client Components10:10
Nested Routes Inside Dynamic Routes4:56
Intercepting Navigation & Using Interception Routes5:11
Combining Parallel & Intercepting Routes7:42
Replace page.js with default.js0:06
Navigating Programmatically2:42
Defining the Base HTML Document0:47
Using & Understanding Route Groups6:39
Building APIs with Route Handlers5:15
Using Middleware5:40
Module Summary0:30
Module Introduction0:56
Adding a Backend2:46
Option 1: Client-side Data Fetching8:50
Option 2: Server-side Data Fetching5:36
Why Use A Separate Backend? Fetching Directly From The Source!6:14
Showing a "Loading" Fallback4:50
Migrating An Entire Application To A Local Data Source (Database)13:19
Granular Data Fetching With Suspense11:35
Module Introduction1:11
Starting Project & Analyzing Mutation Options5:46
Setting Up A Form Action9:19
Creating a Server Action4:16
Storing Data in Databases4:39
Providing User Feedback with The useFormStatus Hook6:04
Using useFormState Hook0:19
Validating User Input With Help Of The useFormState Hook9:57
Adjusting Server Actions for useFormState7:40
Storing Server Actions In Separate Files3:57
"use server" Does Not Guarantee Server-side Execution!0:30
Uploading & Storing Images8:13
Alternative Ways of Using, Configuring & Triggering Server Actions11:00
Revalidating Data To Avoid Caching Problems4:45
Performing Optimistic Updates With NextJS11:42
Caching Differences: Development vs Production6:13
Module Introduction1:09
Making Sense of NextJS' Caching Types6:39
Project Setup1:45
Handling Request Memoization5:31
Understanding The Data Cache & Cache Settings7:31
Controlling Data Caching5:27
Making Sense Of The Full Route Cache4:42
On-Demand Cache Invalidation with revalidatePath & revalidateTag6:03
Setting Up Request Memoization For Custom Data Sources7:15
Setting Up Data Caching For Custom Data Sources3:44
Invalidating Custom Data Source Data3:32
Module Summary1:44
Module Introduction3:08
Using the NextJS Image Component3:43
Understanding the NextJS Image Component5:15
Controlling the Image Size4:44
Working with Priority Images & More Settings3:02
Loading Unknown Images4:12
Configuring CSS For Images With The "fill" Prop3:03
Using An Image Loader & Cloudinary Resizing15:51
Page Metadata - An Introduction1:04
Configuring Static Page Metadata2:57
Configuring Dynamic Page Metadata5:03
Understanding Layout Metadata1:38
Module Introduction1:04
Project Setup3:26
User Signup: Extracting & Validating User Input14:35
Storing Users in a Database - The Wrong Way4:30
Hashing Passwords & Storing User Data The Right Way2:07
Checking for Email Duplication5:01
Theory: How Does User Authentication Work?5:21
Choosing a Third-Party Auth Package (Lucia)2:54
Creating a New Lucia Auth Instance4:31
Configuring A Session & A Session Cookie6:11
Setting Up An Auth Session3:43
Verifying An Active Auth Session7:15
Protecting Routes Against Unauthenticated Access3: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 Parameters3:44
Adding an Auth-only Layout3:41
One Root Layout vs Multiple Root Layouts0:41
Adding User Logout4:10
Course Roundup1:49
But There's More NextJS Content!3:10
From App Router To Pages Router1:40
Using The Code Snapshots0:20
Module Introduction1:12
Our Starting Setup1:19
What Is "File-based Routing"? And Why Is It Helpful?5:22
Adding A First Page4:01
Adding a Named / Static Route File1:34
Working with Nested Paths & Routes3:33
Adding Dynamic Paths & Routes4:54
Extracting Dynamic Path Segment Data (Dynamic Routes)4:54
Building Nested Dynamic Routes & Paths7:12
Adding Catch-All Routes5:44
Navigating with the "Link" Component5:44
Navigating To Dynamic Routes3:41
A Different Way Of Setting Link Hrefs2:55
Navigating Programmatically3:50
Adding a Custom 404 Page1:35
Module Summary5:51
Module Resources0:12
Module Introduction2:04
Planning The Project4:15
Setting Up The Main Pages7:35
Adding Dummy Data & Static Files4:46
Adding Regular React Components7:14
Adding More React Components & Connecting Components10:22
Styling Components In Next.js Projects9:28
<Link> & NextJS 130:42
Adding Buttons & Icons8:25
Adding the "Event Detail" Page (Dynamic Route)8:31
Adding a General Layout Wrapper Component6:27
Working on the "All Events" Page2:05
Adding a Filter Form for Filtering Events8:25
Navigating to the "Filtered Events" Page Progammatically8:25
Extracting Data on the Catch-All Page8:54
Final Steps7:02
Module Summary1:40
Module Resources0:12
Module Introduction2:25
The Problem With Traditional React Apps (and Data Fetching)5:15
How NextJS Prepares & Pre-renders Pages5:38
Introducing Static Generation with "getStaticProps"4:04
NextJS Pre-renders By Default!3:08
Adding "getStaticProps" To Pages6:39
Running Server-side Code & Using the Filesystem7:41
A Look Behind The Scenes5:20
Utilizing Incremental Static Generation (ISR)7:22
ISR: A Look Behind The Scenes3:45
A Closer Look At "getStaticProps" & Configuration Options4:19
Working With Dynamic Parameters9:46
Introducing "getStaticPaths" For Dynamic Pages3:43
Using "getStaticPaths"3:26
"getStaticPaths" & Link Prefetching: Behind The Scenes3:59
Working With Fallback Pages5:27
Loading Paths Dynamically4:02
Fallback Pages & "Not Found" Pages5:53
Introducing "getServerSideProps" for Server-side Rendering (SSR)4:13
Using "getServerSideProps" for Server-side Rendering4:05
"getServerSideProps" and its Context4:20
Dynamic Pages & "getServerSideProps"4:04
"getServerSideProps": Behind The Scenes3:25
Introducing Client-Side Data Fetching (And When To Use It)3:40
Implementing Client-Side Data Fetching14:47
A Note About useSWR0:15
Using the "useSWR" NextJS Hook8:58
Combining Pre-Fetching With Client-Side Fetching8:55
Module Summary6:45
Module Resources0:12
Module Introduction1:04
Preparations5:01
Adding Static Site Generation (SSG) On The Home Page11:02
Loading Data & Paths For Dynamic Pages9:50
Optimizing Data Fetching7:47
Working on the "All Events" Page2:47
Using Server-side Rendering (SSR)9:52
Adding Client-Side Data Fetching10:55
Module Summary1:30
Module Resources0:11
Module Introduction1:19
Analyzing the Need for "head" Metadata1:49
Configuring the "head" Content3:41
Adding Dynamic "head" Content5:17
Reusing Logic Inside A Component4:22
Working with the "_app.js" File (and Why)3:03
Merging "head" Content3:17
The "_document.js" File (And What It Does)5:31
A Closer Look At Our Images1:59
Optimizing Images with the "Next Image" Component & Feature8:37
Taking A Look At The "Next Image" Documentation0:51
Module Summary1:16
Module Resources0:11
Module Introduction0:50
What are "API Routes"?5:37
Writing Our First API Route8:24
Preparing the Frontend Form6:29
Parsing The Incoming Request & Executing Server-side Code10:16
Sending Requests To API Routes5:43
Using API Routes To Get Data7:56
Using API Routes For Pre-Rendering Pages8:04
Creating & Using Dynamic API Routes13:41
Exploring Different Ways Of Structuring API Route Files5:09
Module Summary1:44
Module Resources0:12
Module Introduction1:31
Starting Setup & A Challenge For You!5:15
Adding a Newsletter Route11:10
Adding Comments API Routes8:43
Connecting the Frontend To the Comments API Routes10:59
Setting Up A MongoDB Database5:42
Running MongoDB Queries From Inside API Routes9:14
Inserting Comments Into The Database6:26
Getting Data From The Database4:31
Adding Error Handling7:33
More Error Handling10:47
A Final Note On MongoDB Connections0:17
Module Summary1:45
Improvement: Getting Comments For A Specific Event0:53
Module Resources0:12
Module Introduction1:27
Our Target State & Starting Project4:32
Creating a New React Context5:37
Adding Context State3:49
Using Context Data In Components4:37
Example: Triggering & Showing Notifications6:35
Example: Removing Notifications (Automatically)6:31
Challenge Solution7:22
Module Summary1:09
Module Resources0:12
Module Introduction2:59
Setting Up The Core Pages5:10
Getting Started With The Home Page5:29
Adding The "Hero" Component8:47
Adding Layout & Navigation8:45
Time To Add Styling & A Logo3:18
Starting Work On The "Featured Posts" Part5:47
Adding A Post Grid & Post Items9:40
Rendering Dummy Post Data12:25
Adding the "All Posts" Page3:59
Working On The "Post Detail" Page10:10
Rendering Markdown As JSX2:30
Adding Markdown Files As A Data Source7:32
Adding Functions To Read & Fetch Data From Markdown Files13:40
Using Markdown Data For Rendering Posts8:19
Rendering Dynamic Post Pages & Paths11:42
Rendering Custom HTML Elements with React Markdown0:28
Rendering Images With The "Next Image" Component (From Markdown)12:46
Rendering Code Snippets From Markdown6:29
Preparing The Contact Form4:18
Adding The Contact API Route4:26
Sending Data From The Client To The API Route7:26
Storing Messages With MongoDB In A Database8:52
Adding UI Feedback With Notifications15:05
Adding "head" Data6:52
Adding A "_document.js" File2:55
Using React Portals3:45
Module Summary1:24
Module Resources0:12
Module Introduction1:17
Building NextJS Apps: Your Options8:05
Key Deployment Steps3:06
Checking & Optimizing Our Code3:11
The NextJS Config File & Working With Environment Variables14:25
Running a Test Build & Reducing Code Size7:21
A Full Deployment Example (To Vercel)17:40
A Note On Github & Secret Credentials1:57
Using the "export" Feature2:16
Module Summary0:38
Module Resources0:13
Module Introduction1:16
Our Starting Project1:45
How Does Authentication Work (In React & NextJS Apps)?14:23
Must Read: Install the Right next-auth Version0:20
Using The "next-auth" Library3:04
Adding A User Signup API Route12:59
Sending Signup Requests From The Frontend9:41
Improving Signup With Unique Email Addresses3:00
Adding the "Credentials Auth Provider" & User Login Logic14:08
Sending a "Signin" Request From The Frontend6:52
Managing Active Session (On The Frontend)5:57
Adding User Logout2: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" Page5:46
Using the "next-auth" Session Provider Component5:14
Analyzing Further Authentication Requirements3:42
Protecting API Routes6:37
Adding the "Change Password" Logic10:36
Sending a "Change Password" Request From The Frontend9:16
Module Summary & Final Steps3:29
Module Resources0:12
Module Introduction3:03
What is NextJS?4:45
Key Feature: Server-side (Pre-) Rendering of Pages6:38
Key Feature: File-based Routing3:13
Key Feature: Build Fullstack Apps With Ease1:50
Creating a NextJS Project & IDE Setup6:14
About the "App Router"2:47
Analyzing the Created Project2:52
Adding First Pages To The Project6:05
Adding Nested Pages / Paths3:47
Creating Dynamic Pages3:36
Extracting Dynamic Route Data4:07
Linking Between Pages7:13
Onwards To A Bigger Project!3:32
Preparing Our Project Pages3:42
Rendering A List Of (Dummy) Meetups5:03
Adding A Form For Adding Meetups3:54
The "_app.js" File & Wrapper Components6:17
Programmatic Navigation3:47
Adding Custom Components & Styling With CSS Modules10:00
How NextJS Page Pre-Rendering Actually Works5:52
Introducing Data Fetching For Page Generation (getStaticProps)8:56
More Static Site Generation (SSG) With getStaticProps5:44
Exploring getServerSideProps6:27
Working With Dynamic Path Params In getStaticProps5:14
Dynamic Pages & getStaticProps & getStaticPaths7:16
Introducing API Routes6:20
Connecting & Querying a MongoDB Database9:32
Sending HTTP Requests To API Routes6:49
Getting Data From The Database (For Page Pre-Rendering)7:09
Getting Meetup Detail Data & Paths9:41
Adding "head" Metadata To Pages9:19
Deploying NextJS Projects12:26
Working With Fallback Pages & Re-Deploying4:13
Module Summary2:11
Module Resources0:13
Course Roundup0:55
Bonus!0:33
Requirements
ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module
NO prior NextJS knowledge is required
Description
This course teaches you the latest version of Next.js and covers both the "App Router" and "Pages Router" (and explains what these two approaches are).
Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!
This course covers both the NextJS "App Router" & the "Pages Router" - two different approaches for building fullstack apps with React! And, of course, you'll learn what these two approaches are, why two different approaches exist and how each approach works!