Next.js 15 & React - The Complete Guide
0% Completed
01 – Getting Started
Download Attachment
Reading
Lesson 001 Welcome To The Course!
Video - 00:1:20 mins
Lesson 002 What Is NextJS Why Would You Use It
Video - 00:2:20 mins
Lesson 003 Key Features & Benefits Of NextJS
Video - 00:2:40 mins
Lesson 004 Creating a First NextJS App
Video - 00:4:25 mins
Lesson 005 NextJS vs Just React - Analyzing The NextJS Project
Video - 00:2:30 mins
Lesson 006 Editing The First App
Video - 00:2:21 mins
Lesson 007 Pages Router vs App Router - One Framework, Two Approaches
Video - 00:2:29 mins
Lesson 008 How To Get The Most Out Of This Course
Video - 00:3:5 mins
02 – Optional React Refresher
Download Attachment
Reading
Lesson 002 Module Introduction
Video - 00:1:8 mins
Lesson 003 What Is React & Why Would You Use It
Video - 00:5:37 mins
Lesson 004 React Projects - Requirements
Video - 00:2:9 mins
Lesson 005 Creating React Projects
Video - 00:3:27 mins
Lesson 006 Our Starting Project
Video - 00:3:28 mins
Lesson 007 Understanding How React Works
Video - 00:7:46 mins
Lesson 008 Building A First Custom Component
Video - 00:11:15 mins
Lesson 009 Outputting Dynamic Values
Video - 00:5:3 mins
Lesson 010 Reusing Components
Video - 00:6:00 mins
Lesson 011 Passing Data to Components with Props
Video - 00:6:15 mins
Lesson 012 CSS Styling & CSS Modules
Video - 00:10:7 mins
Lesson 013 Exercise & Another Component
Video - 00:6:31 mins
Lesson 014 Preparing the App For State Management
Video - 00:3:46 mins
Lesson 015 Adding Event Listeners
Video - 00:7:52 mins
Lesson 016 Working with State
Video - 00:10:00 mins
Lesson 017 Lifting State Up
Video - 00:9:8 mins
Lesson 018 The Special children Prop
Video - 00:7:21 mins
Lesson 019 State & Conditional Content
Video - 00:8:59 mins
Lesson 020 Adding a Shared Header & More State Management
Video - 00:7:51 mins
Lesson 021 Adding Form Buttons
Video - 00:3:34 mins
Lesson 022 Handling Form Submission
Video - 00:6:19 mins
Lesson 023 Updating State Based On Previous State
Video - 00:5:30 mins
Lesson 024 Outputting List Data
Video - 00:6:39 mins
Lesson 025 Adding a Backend to the React SPA
Video - 00:6:10 mins
Lesson 026 Sending a POST HTTP Request
Video - 00:4:12 mins
Lesson 027 Handling Side Effects with useEffect()
Video - 00:9:6 mins
Lesson 028 Handle Loading State
Video - 00:4:23 mins
Lesson 029 Understanding & Adding Routing
Video - 00:3:55 mins
Lesson 030 Adding Routes
Video - 00:5:36 mins
Lesson 031 Working with Layout Routes
Video - 00:4:8 mins
Lesson 032 Refactoring Route Components & More Nesting
Video - 00:5:36 mins
Lesson 033 Linking & Navigating
Video - 00:8:9 mins
Lesson 034 Data Fetching via loader()s
Video - 00:9:7 mins
Lesson 035 Submitting Data with action()s
Video - 00:11:8 mins
Lesson 036 Dynamic Routes
Video - 00:8:41 mins
Lesson 037 Module Summary
Video - 00:1:25 mins
Lesson 039 Module Introduction
Video - 00:1:27 mins
Lesson 040 What is ReactJS
Video - 00:3:48 mins
Lesson 041 Why ReactJS & A First Demo
Video - 00:7:25 mins
Lesson 042 Building Single-Page Applications (SPAs)
Video - 00:2:00 mins
Lesson 043 React Alternatives
Video - 00:3:6 mins
Lesson 044 Creating a New React Project
Video - 00:8:15 mins
Lesson 045 Setting Up A Code Editor
Video - 00:3:4 mins
Lesson 047 Diving Into The Created Project
Video - 00:6:31 mins
Lesson 048 How React Works & Understanding Components
Video - 00:7:36 mins
Lesson 049 More Component Work & Styling With CSS Classes
Video - 00:5:34 mins
Lesson 050 Building & Re-using Components
Video - 00:7:19 mins
Lesson 051 Passing Data With Props & Dynamic Content
Video - 00:5:17 mins
Lesson 052 Handling Events
Video - 00:6:40 mins
Lesson 053 Adding More Components
Video - 00:5:40 mins
Lesson 054 Introducing State
Video - 00:8:19 mins
Lesson 055 Working with Event Props
Video - 00:7:8 mins
Lesson 057 Adding Routing
Video - 00:16:52 mins
Lesson 058 Adding Links & Navigation
Video - 00:5:21 mins
Lesson 059 Scoping Component Styles With CSS Modules
Video - 00:5:45 mins
Lesson 060 Outputting Lists Of Data & Components
Video - 00:5:50 mins
Lesson 061 Adding Even More Components
Video - 00:9:48 mins
Lesson 062 Creating Wrapper Components
Video - 00:8:39 mins
Lesson 063 Working With Forms
Video - 00:8:58 mins
Lesson 064 Getting User Input & Handling Form Submission
Video - 00:9:45 mins
Lesson 065 Preparing The App For Http Requests & Adding a Backend
Video - 00:6:52 mins
Lesson 066 Sending a POST Http Request
Video - 00:5:18 mins
Lesson 067 Navigating Programmatically
Video - 00:3:42 mins
Lesson 068 Getting Started with Fetching Data
Video - 00:9:25 mins
Lesson 069 Using the useEffect Hook
Video - 00:10:8 mins
Lesson 070 Introducing React Context
Video - 00:11:2 mins
Lesson 071 Updating State Based On Previous State
Video - 00:5:54 mins
Lesson 072 Using Context In Components
Video - 00:12:10 mins
Lesson 073 More Context Usage
Video - 00:6:54 mins
Lesson 074 Module Summary
Video - 00:1:00 mins
03 – NextJS Essentials (App Router)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:20 mins
Lesson 002 Starting Setup
Video - 00:2:32 mins
Lesson 003 Understanding File-based Routing & React Server Components
Video - 00:2:45 mins
Lesson 004 Adding Another Route via the File System
Video - 00:3:6 mins
Lesson 005 Navigating Between Pages - Wrong & Right Solution
Video - 00:4:12 mins
Lesson 006 Working with Pages & Layouts
Video - 00:3:22 mins
Lesson 007 Reserved File Names, Custom Components & How To Organize A NextJS Project
Video - 00:6:31 mins
Lesson 009 Configuring Dynamic Routes & Using Route Parameters
Video - 00:6:17 mins
Lesson 010 Onwards to the Main Project The Foodies App
Video - 00:1:24 mins
Lesson 011 Exercise Your Task
Video - 00:2:3 mins
Lesson 012 Exercise Solution
Video - 00:8:19 mins
Lesson 013 Revisiting The Concept Of Layouts
Video - 00:3:50 mins
Lesson 014 Adding a Custom Component To A Layout
Video - 00:5:58 mins
Lesson 015 Styling NextJS Project Your Options & Using CSS Modules
Video - 00:6:00 mins
Lesson 016 Optimizing Images with the NextJS Image Component
Video - 00:4:57 mins
Lesson 017 Using More Custom Components
Video - 00:3:48 mins
Lesson 018 Populating The Starting Page Content
Video - 00:4:18 mins
Lesson 019 Preparing an Image Slideshow
Video - 00:3:25 mins
Lesson 020 React Server Components vs Client Components - When To Use What
Video - 00:8:15 mins
Lesson 021 Using Client Components Efficiently
Video - 00:11:7 mins
Lesson 022 Outputting Meals Data & Images With Unknown Dimensions
Video - 00:10:31 mins
Lesson 023 Setting Up A SQLite Database
Video - 00:3:11 mins
Lesson 024 Fetching Data By Leveraging NextJS & Fullstack Capabilities
Video - 00:7:17 mins
Lesson 025 Adding A Loading Page
Video - 00:4:00 mins
Lesson 026 Using Suspense & Streamed Responses For Granular Loading State Management
Video - 00:5:54 mins
Lesson 027 Handling Errors
Video - 00:5:22 mins
Lesson 028 Handling Not Found States
Video - 00:1:57 mins
Lesson 029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Video - 00:11:4 mins
Lesson 030 Throwing Not Found Errors For Individual Meals
Video - 00:2:3 mins
Lesson 031 Getting Started with the Share Meal Form
Video - 00:1:53 mins
Lesson 032 Getting Started with a Custom Image Picker Input Component
Video - 00:8:28 mins
Lesson 033 Adding an Image Preview to the Picker
Video - 00:6:00 mins
Lesson 035 Introducing & Using Server Actions for Handling Form Submissions
Video - 00:9:2 mins
Lesson 036 Storing Server Actions in Separate Files
Video - 00:3:45 mins
Lesson 037 Creating a Slug & Sanitizing User Input for XSS Protection
Video - 00:3:20 mins
Lesson 038 Storing Uploaded Images & Storing Data in the Database
Video - 00:12:56 mins
Lesson 039 Managing the Form Submission Status with useFormStatus
Video - 00:5:30 mins
Lesson 040 Adding Server-Side Input Validation
Video - 00:5:54 mins
Lesson 042 Working with Server Action Responses & useFormState
Video - 00:8:5 mins
Lesson 043 Building For Production & Understanding NextJS Caching
Video - 00:6:6 mins
Lesson 044 Triggering Cache Revalidations
Video - 00:3:57 mins
Lesson 045 Don't Store Files Locally On The Filesystem!
Video - 00:2:13 mins
Lesson 047 Adding Static Metadata
Video - 00:3:47 mins
Lesson 048 Adding Dynamic Metadata
Video - 00:2:20 mins
Lesson 049 Module Summary
Video - 00:4:25 mins
04 – Routing & Page Rendering – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:37 mins
Lesson 002 Project Setup, Overview & An Exercise!
Video - 00:4:17 mins
Lesson 003 Exercise Solution - Part 1
Video - 00:7:17 mins
Lesson 004 Exercise Solution - Part 2
Video - 00:4:56 mins
Lesson 005 App Styling & Using Dummy Data
Video - 00:8:59 mins
Lesson 006 Handling Not Found Errors & Showing Not Found Pages
Video - 00:4:39 mins
Lesson 007 Setting Up & Using Parallel Routes
Video - 00:6:40 mins
Lesson 008 Working with Parallel Routes & Nested Routes
Video - 00:12:50 mins
Lesson 009 Configuring Catch-All Routes
Video - 00:6:1 mins
Lesson 010 Catch-All Fallback Routes & Dealing With Multiple Path Segments
Video - 00:9:21 mins
Lesson 011 Throwing (Route-related) Errors
Video - 00:3:38 mins
Lesson 012 Handling Errors With Error Pages
Video - 00:3:2 mins
Lesson 013 Server vs Client Components
Video - 00:10:10 mins
Lesson 014 Nested Routes Inside Dynamic Routes
Video - 00:4:56 mins
Lesson 015 Intercepting Navigation & Using Interception Routes
Video - 00:5:11 mins
Lesson 016 Combining Parallel & Intercepting Routes
Video - 00:7:42 mins
Lesson 018 Navigating Programmatically
Video - 00:2:42 mins
Lesson 019 Using & Understanding Route Groups
Video - 00:6:39 mins
Lesson 020 Building APIs with Route Handlers
Video - 00:5:15 mins
Lesson 021 Using Middleware
Video - 00:5:40 mins
Lesson 022 Module Summary
Video - 00:00:30 mins
05 – Data Fetching – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:00:56 mins
Lesson 002 Adding a Backend
Video - 00:2:46 mins
Lesson 003 Option 1 Client-side Data Fetching
Video - 00:8:50 mins
Lesson 004 Option 2 Server-side Data Fetching
Video - 00:5:36 mins
Lesson 005 Why Use A Separate Backend Fetching Directly From The Source!
Video - 00:6:14 mins
Lesson 006 Showing a Loading Fallback
Video - 00:4:50 mins
Lesson 007 Migrating An Entire Application To A Local Data Source (Database)
Video - 00:13:19 mins
Lesson 008 Granular Data Fetching With Suspense
Video - 00:11:35 mins
06 – Mutating Data – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:11 mins
Lesson 002 Starting Project & Analyzing Mutation Options
Video - 00:5:46 mins
Lesson 003 Setting Up A Form Action
Video - 00:9:19 mins
Lesson 004 Creating a Server Action
Video - 00:4:16 mins
Lesson 005 Storing Data in Databases
Video - 00:4:39 mins
Lesson 006 Providing User Feedback with The useFormStatus Hook
Video - 00:6:4 mins
Lesson 008 Validating User Input With Help Of The useFormState Hook
Video - 00:9:57 mins
Lesson 009 Adjusting Server Actions for useFormState
Video - 00:7:40 mins
Lesson 010 Storing Server Actions In Separate Files
Video - 00:3:57 mins
Lesson 012 Uploading & Storing Images
Video - 00:8:13 mins
Lesson 013 Alternative Ways of Using, Configuring & Triggering Server Actions
Video - 00:11:00 mins
Lesson 014 Revalidating Data To Avoid Caching Problems
Video - 00:4:45 mins
Lesson 015 Performing Optimistic Updates With NextJS
Video - 00:11:42 mins
Lesson 016 Caching Differences Development vs Production
Video - 00:6:13 mins
07 – Understanding & Configuring Caching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:9 mins
Lesson 002 Making Sense of NextJS' Caching Types
Video - 00:5:13 mins
Lesson 003 Project Setup
Video - 00:1:45 mins
Lesson 004 Handling Request Memoization
Video - 00:5:31 mins
Lesson 005 Understanding The Data Cache & Cache Settings
Video - 00:5:50 mins
Lesson 006 Controlling Data Caching
Video - 00:5:27 mins
Lesson 007 Making Sense Of The Full Route Cache
Video - 00:4:42 mins
Lesson 008 On-Demand Cache Invalidation with revalidatePath & revalidateTag
Video - 00:6:3 mins
Lesson 009 Setting Up Request Memoization For Custom Data Sources
Video - 00:7:15 mins
Lesson 010 Setting Up Data Caching For Custom Data Sources
Video - 00:3:44 mins
Lesson 011 Invalidating Custom Data Source Data
Video - 00:3:32 mins
Lesson 012 Module Summary
Video - 00:1:44 mins
08 – NextJS App Optimizations
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:8 mins
Lesson 002 Using the NextJS Image Component
Video - 00:3:43 mins
Lesson 003 Understanding the NextJS Image Component
Video - 00:5:15 mins
Lesson 004 Controlling the Image Size
Video - 00:4:45 mins
Lesson 005 Working with Priority Images & More Settings
Video - 00:3:3 mins
Lesson 006 Loading Unknown Images
Video - 00:4:12 mins
Lesson 007 Configuring CSS For Images With The fill Prop
Video - 00:3:3 mins
Lesson 008 Using An Image Loader & Cloudinary Resizing
Video - 00:15:51 mins
Lesson 009 Page Metadata - An Introduction
Video - 00:1:4 mins
Lesson 010 Configuring Static Page Metadata
Video - 00:2:57 mins
Lesson 011 Configuring Dynamic Page Metadata
Video - 00:5:3 mins
Lesson 012 Understanding Layout Metadata
Video - 00:1:38 mins
09 – User Authentication
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:4 mins
Lesson 002 Project Setup
Video - 00:3:26 mins
Lesson 003 User Signup Extracting & Validating User Input
Video - 00:14:35 mins
Lesson 004 Storing Users in a Database - The Wrong Way
Video - 00:4:30 mins
Lesson 005 Hashing Passwords & Storing User Data The Right Way
Video - 00:2:7 mins
Lesson 006 Checking for Email Duplication
Video - 00:5:1 mins
Lesson 007 Theory How Does User Authentication Work
Video - 00:5:21 mins
Lesson 008 Choosing a Third-Party Auth Package (Lucia)
Video - 00:2:54 mins
Lesson 009 Creating a New Lucia Auth Instance
Video - 00:4:32 mins
Lesson 010 Configuring A Session & A Session Cookie
Video - 00:4:51 mins
Lesson 011 Setting Up An Auth Session
Video - 00:3:44 mins
Lesson 012 Verifying An Active Auth Session
Video - 00:7:15 mins
Lesson 013 Protecting Routes Against Unauthenticated Access
Video - 00:3:7 mins
Lesson 014 Switching Auth Modes With Query Parameters (Search Params)
Video - 00:5:35 mins
Lesson 015 Adding User Login (via a Server Action)
Video - 00:5:34 mins
Lesson 016 Triggering Different Server Actions via Query Parameters
Video - 00:3:44 mins
Lesson 017 Adding an Auth-only Layout
Video - 00:3:41 mins
Lesson 019 Adding User Logout
Video - 00:4:10 mins
10 – Roundup & Next Steps
11 – Pages & File-based Routing
Download Attachment
Reading
Lesson 001 From App Router To Pages Router
Video - 00:1:40 mins
Lesson 003 Module Introduction
Video - 00:1:12 mins
Lesson 004 Our Starting Setup
Video - 00:1:19 mins
Lesson 005 What Is File-based Routing And Why Is It Helpful
Video - 00:5:22 mins
Lesson 006 Adding A First Page
Video - 00:4:1 mins
Lesson 007 Adding a Named Static Route File
Video - 00:1:34 mins
Lesson 008 Working with Nested Paths & Routes
Video - 00:3:33 mins
Lesson 009 Adding Dynamic Paths & Routes
Video - 00:4:54 mins
Lesson 010 Extracting Dynamic Path Segment Data (Dynamic Routes)
Video - 00:4:54 mins
Lesson 011 Building Nested Dynamic Routes & Paths
Video - 00:7:12 mins
Lesson 012 Adding Catch-All Routes
Video - 00:5:44 mins
Lesson 013 Navigating with the Link Component
Video - 00:5:44 mins
Lesson 014 Navigating To Dynamic Routes
Video - 00:3:41 mins
Lesson 015 A Different Way Of Setting Link Hrefs
Video - 00:2:55 mins
Lesson 016 Navigating Programmatically
Video - 00:3:50 mins
Lesson 017 Adding a Custom 404 Page
Video - 00:1:35 mins
Lesson 018 Module Summary
Video - 00:5:51 mins
12 – Project Time Working with File-based Routing
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:2:4 mins
Lesson 002 Planning The Project
Video - 00:4:15 mins
Lesson 003 Setting Up The Main Pages
Video - 00:7:35 mins
Lesson 004 Adding Dummy Data & Static Files
Video - 00:4:46 mins
Lesson 005 Adding Regular React Components
Video - 00:7:14 mins
Lesson 006 Adding More React Components & Connecting Components
Video - 00:10:22 mins
Lesson 007 Styling Components In Next.js Projects
Video - 00:9:28 mins
Lesson 009 Adding Buttons & Icons
Video - 00:8:26 mins
Lesson 010 Adding the Event Detail Page (Dynamic Route)
Video - 00:8:31 mins
Lesson 011 Adding a General Layout Wrapper Component
Video - 00:6:27 mins
Lesson 012 Working on the All Events Page
Video - 00:2:5 mins
Lesson 013 Adding a Filter Form for Filtering Events
Video - 00:8:25 mins
Lesson 014 Navigating to the Filtered Events Page Progammatically
Video - 00:8:25 mins
Lesson 015 Extracting Data on the Catch-All Page
Video - 00:8:54 mins
Lesson 016 Final Steps
Video - 00:7:2 mins
Lesson 017 Module Summary
Video - 00:1:40 mins
13 – Page Pre-Rendering & Data Fetching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:2:25 mins
Lesson 002 The Problem With Traditional React Apps (and Data Fetching)
Video - 00:5:15 mins
Lesson 003 How NextJS Prepares & Pre-renders Pages
Video - 00:5:38 mins
Lesson 004 Introducing Static Generation with getStaticProps
Video - 00:4:4 mins
Lesson 005 NextJS Pre-renders By Default!
Video - 00:3:8 mins
Lesson 006 Adding getStaticProps To Pages
Video - 00:6:39 mins
Lesson 007 Running Server-side Code & Using the Filesystem
Video - 00:7:41 mins
Lesson 008 A Look Behind The Scenes
Video - 00:5:20 mins
Lesson 009 Utilizing Incremental Static Generation (ISR)
Video - 00:7:22 mins
Lesson 010 ISR A Look Behind The Scenes
Video - 00:3:45 mins
Lesson 011 A Closer Look At getStaticProps & Configuration Options
Video - 00:4:20 mins
Lesson 012 Working With Dynamic Parameters
Video - 00:9:46 mins
Lesson 013 Introducing getStaticPaths For Dynamic Pages
Video - 00:3:44 mins
Lesson 014 Using getStaticPaths
Video - 00:3:27 mins
Lesson 015 getStaticPaths & Link Prefetching Behind The Scenes
Video - 00:3:59 mins
Lesson 016 Working With Fallback Pages
Video - 00:5:27 mins
Lesson 017 Loading Paths Dynamically
Video - 00:4:2 mins
Lesson 018 Fallback Pages & Not Found Pages
Video - 00:5:53 mins
Lesson 019 Introducing getServerSideProps for Server-side Rendering (SSR)
Video - 00:4:14 mins
Lesson 020 Using getServerSideProps for Server-side Rendering
Video - 00:4:5 mins
Lesson 021 getServerSideProps and its Context
Video - 00:4:20 mins
Lesson 022 Dynamic Pages & getServerSideProps
Video - 00:4:4 mins
Lesson 023 getServerSideProps Behind The Scenes
Video - 00:3:25 mins
Lesson 024 Introducing Client-Side Data Fetching (And When To Use It)
Video - 00:3:40 mins
Lesson 025 Implementing Client-Side Data Fetching
Video - 00:14:47 mins
Lesson 027 Using the useSWR NextJS Hook
Video - 00:8:58 mins
Lesson 028 Combining Pre-Fetching With Client-Side Fetching
Video - 00:8:55 mins
Lesson 029 Module Summary
Video - 00:6:45 mins
14 – Project Time Page Pre-rendering & Data Fetching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:4 mins
Lesson 002 Preparations
Video - 00:5:1 mins
Lesson 003 Adding Static Site Generation (SSG) On The Home Page
Video - 00:11:2 mins
Lesson 004 Loading Data & Paths For Dynamic Pages
Video - 00:9:50 mins
Lesson 005 Optimizing Data Fetching
Video - 00:7:47 mins
Lesson 006 Working on the All Events Page
Video - 00:2:47 mins
Lesson 007 Using Server-side Rendering (SSR)
Video - 00:9:52 mins
Lesson 008 Adding Client-Side Data Fetching
Video - 00:10:55 mins
Lesson 009 Module Summary
Video - 00:1:30 mins
15 – Optimizing NextJS Apps
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:19 mins
Lesson 002 Analyzing the Need for head Metadata
Video - 00:1:49 mins
Lesson 003 Configuring the head Content
Video - 00:3:41 mins
Lesson 004 Adding Dynamic head Content
Video - 00:5:17 mins
Lesson 005 Reusing Logic Inside A Component
Video - 00:4:22 mins
Lesson 006 Working with the _app.js File (and Why)
Video - 00:3:4 mins
Lesson 007 Merging head Content
Video - 00:3:17 mins
Lesson 008 The _document.js File (And What It Does)
Video - 00:5:31 mins
Lesson 009 A Closer Look At Our Images
Video - 00:1:59 mins
Lesson 010 Optimizing Images with the Next Image Component & Feature
Video - 00:8:37 mins
Lesson 011 Taking A Look At The Next Image Documentation
Video - 00:00:51 mins
Lesson 012 Module Summary
Video - 00:1:16 mins
16 – Adding Backend Code with API Routes (Fullstack React)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:00:51 mins
Lesson 002 What are API Routes
Video - 00:5:38 mins
Lesson 003 Writing Our First API Route
Video - 00:8:24 mins
Lesson 004 Preparing the Frontend Form
Video - 00:6:29 mins
Lesson 005 Parsing The Incoming Request & Executing Server-side Code
Video - 00:10:16 mins
Lesson 006 Sending Requests To API Routes
Video - 00:5:43 mins
Lesson 007 Using API Routes To Get Data
Video - 00:7:56 mins
Lesson 008 Using API Routes For Pre-Rendering Pages
Video - 00:8:4 mins
Lesson 009 Creating & Using Dynamic API Routes
Video - 00:13:41 mins
Lesson 010 Exploring Different Ways Of Structuring API Route Files
Video - 00:5:9 mins
Lesson 011 Module Summary
Video - 00:1:44 mins
17 – Project Time API Routes
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:31 mins
Lesson 002 Starting Setup & A Challenge For You!
Video - 00:5:15 mins
Lesson 003 Adding a Newsletter Route
Video - 00:11:10 mins
Lesson 004 Adding Comments API Routes
Video - 00:8:43 mins
Lesson 005 Connecting the Frontend To the Comments API Routes
Video - 00:10:59 mins
Lesson 006 Setting Up A MongoDB Database
Video - 00:5:42 mins
Lesson 007 Running MongoDB Queries From Inside API Routes
Video - 00:9:14 mins
Lesson 008 Inserting Comments Into The Database
Video - 00:6:26 mins
Lesson 009 Getting Data From The Database
Video - 00:4:31 mins
Lesson 010 Adding Error Handling
Video - 00:7:33 mins
Lesson 011 More Error Handling
Video - 00:10:48 mins
Lesson 013 Module Summary
Video - 00:1:45 mins
18 – Working with App-wide State (React Context)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:27 mins
Lesson 002 Our Target State & Starting Project
Video - 00:4:32 mins
Lesson 003 Creating a New React Context
Video - 00:5:37 mins
Lesson 004 Adding Context State
Video - 00:3:49 mins
Lesson 005 Using Context Data In Components
Video - 00:4:37 mins
Lesson 006 Example Triggering & Showing Notifications
Video - 00:6:35 mins
Lesson 007 Example Removing Notifications (Automatically)
Video - 00:6:31 mins
Lesson 008 Challenge Solution
Video - 00:7:22 mins
Lesson 009 Module Summary
Video - 00:1:9 mins
19 – Complete App Example Build a Full Blog A to Z
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:00 mins
Lesson 002 Setting Up The Core Pages
Video - 00:5:10 mins
Lesson 003 Getting Started With The Home Page
Video - 00:5:29 mins
Lesson 004 Adding The Hero Component
Video - 00:8:47 mins
Lesson 005 Adding Layout & Navigation
Video - 00:8:45 mins
Lesson 006 Time To Add Styling & A Logo
Video - 00:3:18 mins
Lesson 007 Starting Work On The Featured Posts Part
Video - 00:5:47 mins
Lesson 008 Adding A Post Grid & Post Items
Video - 00:9:41 mins
Lesson 009 Rendering Dummy Post Data
Video - 00:12:25 mins
Lesson 010 Adding the All Posts Page
Video - 00:3:59 mins
Lesson 011 Working On The Post Detail Page
Video - 00:10:10 mins
Lesson 012 Rendering Markdown As JSX
Video - 00:2:30 mins
Lesson 013 Adding Markdown Files As A Data Source
Video - 00:7:32 mins
Lesson 014 Adding Functions To Read & Fetch Data From Markdown Files
Video - 00:13:40 mins
Lesson 015 Using Markdown Data For Rendering Posts
Video - 00:8:19 mins
Lesson 016 Rendering Dynamic Post Pages & Paths
Video - 00:11:42 mins
Lesson 018 Rendering Images With The Next Image Component (From Markdown)
Video - 00:12:46 mins
Lesson 019 Rendering Code Snippets From Markdown
Video - 00:6:29 mins
Lesson 020 Preparing The Contact Form
Video - 00:4:18 mins
Lesson 021 Adding The Contact API Route
Video - 00:4:26 mins
Lesson 022 Sending Data From The Client To The API Route
Video - 00:7:26 mins
Lesson 023 Storing Messages With MongoDB In A Database
Video - 00:8:52 mins
Lesson 024 Adding UI Feedback With Notifications
Video - 00:15:5 mins
Lesson 025 Adding head Data
Video - 00:6:52 mins
Lesson 026 Adding A _document.js File
Video - 00:2:55 mins
Lesson 027 Using React Portals
Video - 00:3:45 mins
Lesson 028 Module Summary
Video - 00:1:24 mins
20 – Deploying NextJS Apps
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:17 mins
Lesson 002 Building NextJS Apps Your Options
Video - 00:8:5 mins
Lesson 003 Key Deployment Steps
Video - 00:3:6 mins
Lesson 004 Checking & Optimizing Our Code
Video - 00:3:11 mins
Lesson 005 The NextJS Config File & Working With Environment Variables
Video - 00:14:26 mins
Lesson 006 Running a Test Build & Reducing Code Size
Video - 00:7:21 mins
Lesson 007 A Full Deployment Example (To Vercel)
Video - 00:17:40 mins
Lesson 008 A Note On Github & Secret Credentials
Video - 00:1:57 mins
Lesson 009 Using the export Feature
Video - 00:2:16 mins
Lesson 010 Module Summary
Video - 00:00:38 mins
21 – Adding Authentication
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:16 mins
Lesson 002 Our Starting Project
Video - 00:1:45 mins
Lesson 003 How Does Authentication Work (In React & NextJS Apps)
Video - 00:14:23 mins
Lesson 005 Using The next-auth Library
Video - 00:3:4 mins
Lesson 006 Adding A User Signup API Route
Video - 00:12:59 mins
Lesson 007 Sending Signup Requests From The Frontend
Video - 00:9:41 mins
Lesson 008 Improving Signup With Unique Email Addresses
Video - 00:3:00 mins
Lesson 009 Adding the Credentials Auth Provider & User Login Logic
Video - 00:14:8 mins
Lesson 010 Sending a Signin Request From The Frontend
Video - 00:6:52 mins
Lesson 011 Managing Active Session (On The Frontend)
Video - 00:5:57 mins
Lesson 012 Adding User Logout
Video - 00:2:18 mins
Lesson 013 Adding Client-Side Page Guards (Route Protection)
Video - 00:7:50 mins
Lesson 014 Adding Server-Side Page Guards (And When To Use Which Approach)
Video - 00:7:41 mins
Lesson 015 Protecting the Auth Page
Video - 00:5:46 mins
Lesson 016 Using the next-auth Session Provider Component
Video - 00:5:14 mins
Lesson 017 Analyzing Further Authentication Requirements
Video - 00:3:42 mins
Lesson 018 Protecting API Routes
Video - 00:6:37 mins
Lesson 019 Adding the Change Password Logic
Video - 00:10:36 mins
Lesson 020 Sending a Change Password Request From The Frontend
Video - 00:9:16 mins
Lesson 021 Module Summary & Final Steps
Video - 00:3:29 mins
22 – Optional NextJS Summary
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:3 mins
Lesson 002 What is NextJS
Video - 00:4:45 mins
Lesson 003 Key Feature Server-side (Pre-) Rendering of Pages
Video - 00:6:38 mins
Lesson 004 Key Feature File-based Routing
Video - 00:3:13 mins
Lesson 005 Key Feature Build Fullstack Apps With Ease
Video - 00:1:50 mins
Lesson 006 Creating a NextJS Project & IDE Setup
Video - 00:6:14 mins
Lesson 007 About the App Router
Video - 00:2:47 mins
Lesson 008 Analyzing the Created Project
Video - 00:2:52 mins
Lesson 009 Adding First Pages To The Project
Video - 00:6:6 mins
Lesson 010 Adding Nested Pages Paths
Video - 00:3:47 mins
Lesson 011 Creating Dynamic Pages
Video - 00:3:36 mins
Lesson 012 Extracting Dynamic Route Data
Video - 00:4:7 mins
Lesson 013 Linking Between Pages
Video - 00:7:13 mins
Lesson 014 Onwards To A Bigger Project!
Video - 00:3:32 mins
Lesson 015 Preparing Our Project Pages
Video - 00:3:42 mins
Lesson 016 Rendering A List Of (Dummy) Meetups
Video - 00:5:4 mins
Lesson 017 Adding A Form For Adding Meetups
Video - 00:3:55 mins
Lesson 018 The _app.js File & Wrapper Components
Video - 00:6:17 mins
Lesson 019 Programmatic Navigation
Video - 00:3:47 mins
Lesson 020 Adding Custom Components & Styling With CSS Modules
Video - 00:10:00 mins
Lesson 021 How NextJS Page Pre-Rendering Actually Works
Video - 00:5:52 mins
Lesson 022 Introducing Data Fetching For Page Generation (getStaticProps)
Video - 00:8:56 mins
Lesson 023 More Static Site Generation (SSG) With getStaticProps
Video - 00:5:44 mins
Lesson 024 Exploring getServerSideProps
Video - 00:6:27 mins
Lesson 025 Working With Dynamic Path Params In getStaticProps
Video - 00:5:14 mins
Lesson 026 Dynamic Pages & getStaticProps & getStaticPaths
Video - 00:7:16 mins
Lesson 027 Introducing API Routes
Video - 00:6:21 mins
Lesson 028 Connecting & Querying a MongoDB Database
Video - 00:9:32 mins
Lesson 029 Sending HTTP Requests To API Routes
Video - 00:6:49 mins
01 – Getting Started
Download Attachment
Reading
Lesson 001 Welcome To The Course!
Video - 00:1:20 mins
Lesson 002 What Is NextJS Why Would You Use It
Video - 00:2:20 mins
Lesson 003 Key Features & Benefits Of NextJS
Video - 00:2:40 mins
Lesson 004 Creating a First NextJS App
Video - 00:4:25 mins
Lesson 005 NextJS vs Just React - Analyzing The NextJS Project
Video - 00:2:30 mins
Lesson 006 Editing The First App
Video - 00:2:21 mins
Lesson 007 Pages Router vs App Router - One Framework, Two Approaches
Video - 00:2:29 mins
Lesson 008 How To Get The Most Out Of This Course
Video - 00:3:5 mins
02 – Optional React Refresher
Download Attachment
Reading
Lesson 002 Module Introduction
Video - 00:1:8 mins
Lesson 003 What Is React & Why Would You Use It
Video - 00:5:37 mins
Lesson 004 React Projects - Requirements
Video - 00:2:9 mins
Lesson 005 Creating React Projects
Video - 00:3:27 mins
Lesson 006 Our Starting Project
Video - 00:3:28 mins
Lesson 007 Understanding How React Works
Video - 00:7:46 mins
Lesson 008 Building A First Custom Component
Video - 00:11:15 mins
Lesson 009 Outputting Dynamic Values
Video - 00:5:3 mins
Lesson 010 Reusing Components
Video - 00:6:00 mins
Lesson 011 Passing Data to Components with Props
Video - 00:6:15 mins
Lesson 012 CSS Styling & CSS Modules
Video - 00:10:7 mins
Lesson 013 Exercise & Another Component
Video - 00:6:31 mins
Lesson 014 Preparing the App For State Management
Video - 00:3:46 mins
Lesson 015 Adding Event Listeners
Video - 00:7:52 mins
Lesson 016 Working with State
Video - 00:10:00 mins
Lesson 017 Lifting State Up
Video - 00:9:8 mins
Lesson 018 The Special children Prop
Video - 00:7:21 mins
Lesson 019 State & Conditional Content
Video - 00:8:59 mins
Lesson 020 Adding a Shared Header & More State Management
Video - 00:7:51 mins
Lesson 021 Adding Form Buttons
Video - 00:3:34 mins
Lesson 022 Handling Form Submission
Video - 00:6:19 mins
Lesson 023 Updating State Based On Previous State
Video - 00:5:30 mins
Lesson 024 Outputting List Data
Video - 00:6:39 mins
Lesson 025 Adding a Backend to the React SPA
Video - 00:6:10 mins
Lesson 026 Sending a POST HTTP Request
Video - 00:4:12 mins
Lesson 027 Handling Side Effects with useEffect()
Video - 00:9:6 mins
Lesson 028 Handle Loading State
Video - 00:4:23 mins
Lesson 029 Understanding & Adding Routing
Video - 00:3:55 mins
Lesson 030 Adding Routes
Video - 00:5:36 mins
Lesson 031 Working with Layout Routes
Video - 00:4:8 mins
Lesson 032 Refactoring Route Components & More Nesting
Video - 00:5:36 mins
Lesson 033 Linking & Navigating
Video - 00:8:9 mins
Lesson 034 Data Fetching via loader()s
Video - 00:9:7 mins
Lesson 035 Submitting Data with action()s
Video - 00:11:8 mins
Lesson 036 Dynamic Routes
Video - 00:8:41 mins
Lesson 037 Module Summary
Video - 00:1:25 mins
Lesson 039 Module Introduction
Video - 00:1:27 mins
Lesson 040 What is ReactJS
Video - 00:3:48 mins
Lesson 041 Why ReactJS & A First Demo
Video - 00:7:25 mins
Lesson 042 Building Single-Page Applications (SPAs)
Video - 00:2:00 mins
Lesson 043 React Alternatives
Video - 00:3:6 mins
Lesson 044 Creating a New React Project
Video - 00:8:15 mins
Lesson 045 Setting Up A Code Editor
Video - 00:3:4 mins
Lesson 047 Diving Into The Created Project
Video - 00:6:31 mins
Lesson 048 How React Works & Understanding Components
Video - 00:7:36 mins
Lesson 049 More Component Work & Styling With CSS Classes
Video - 00:5:34 mins
Lesson 050 Building & Re-using Components
Video - 00:7:19 mins
Lesson 051 Passing Data With Props & Dynamic Content
Video - 00:5:17 mins
Lesson 052 Handling Events
Video - 00:6:40 mins
Lesson 053 Adding More Components
Video - 00:5:40 mins
Lesson 054 Introducing State
Video - 00:8:19 mins
Lesson 055 Working with Event Props
Video - 00:7:8 mins
Lesson 057 Adding Routing
Video - 00:16:52 mins
Lesson 058 Adding Links & Navigation
Video - 00:5:21 mins
Lesson 059 Scoping Component Styles With CSS Modules
Video - 00:5:45 mins
Lesson 060 Outputting Lists Of Data & Components
Video - 00:5:50 mins
Lesson 061 Adding Even More Components
Video - 00:9:48 mins
Lesson 062 Creating Wrapper Components
Video - 00:8:39 mins
Lesson 063 Working With Forms
Video - 00:8:58 mins
Lesson 064 Getting User Input & Handling Form Submission
Video - 00:9:45 mins
Lesson 065 Preparing The App For Http Requests & Adding a Backend
Video - 00:6:52 mins
Lesson 066 Sending a POST Http Request
Video - 00:5:18 mins
Lesson 067 Navigating Programmatically
Video - 00:3:42 mins
Lesson 068 Getting Started with Fetching Data
Video - 00:9:25 mins
Lesson 069 Using the useEffect Hook
Video - 00:10:8 mins
Lesson 070 Introducing React Context
Video - 00:11:2 mins
Lesson 071 Updating State Based On Previous State
Video - 00:5:54 mins
Lesson 072 Using Context In Components
Video - 00:12:10 mins
Lesson 073 More Context Usage
Video - 00:6:54 mins
Lesson 074 Module Summary
Video - 00:1:00 mins
03 – NextJS Essentials (App Router)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:20 mins
Lesson 002 Starting Setup
Video - 00:2:32 mins
Lesson 003 Understanding File-based Routing & React Server Components
Video - 00:2:45 mins
Lesson 004 Adding Another Route via the File System
Video - 00:3:6 mins
Lesson 005 Navigating Between Pages - Wrong & Right Solution
Video - 00:4:12 mins
Lesson 006 Working with Pages & Layouts
Video - 00:3:22 mins
Lesson 007 Reserved File Names, Custom Components & How To Organize A NextJS Project
Video - 00:6:31 mins
Lesson 009 Configuring Dynamic Routes & Using Route Parameters
Video - 00:6:17 mins
Lesson 010 Onwards to the Main Project The Foodies App
Video - 00:1:24 mins
Lesson 011 Exercise Your Task
Video - 00:2:3 mins
Lesson 012 Exercise Solution
Video - 00:8:19 mins
Lesson 013 Revisiting The Concept Of Layouts
Video - 00:3:50 mins
Lesson 014 Adding a Custom Component To A Layout
Video - 00:5:58 mins
Lesson 015 Styling NextJS Project Your Options & Using CSS Modules
Video - 00:6:00 mins
Lesson 016 Optimizing Images with the NextJS Image Component
Video - 00:4:57 mins
Lesson 017 Using More Custom Components
Video - 00:3:48 mins
Lesson 018 Populating The Starting Page Content
Video - 00:4:18 mins
Lesson 019 Preparing an Image Slideshow
Video - 00:3:25 mins
Lesson 020 React Server Components vs Client Components - When To Use What
Video - 00:8:15 mins
Lesson 021 Using Client Components Efficiently
Video - 00:11:7 mins
Lesson 022 Outputting Meals Data & Images With Unknown Dimensions
Video - 00:10:31 mins
Lesson 023 Setting Up A SQLite Database
Video - 00:3:11 mins
Lesson 024 Fetching Data By Leveraging NextJS & Fullstack Capabilities
Video - 00:7:17 mins
Lesson 025 Adding A Loading Page
Video - 00:4:00 mins
Lesson 026 Using Suspense & Streamed Responses For Granular Loading State Management
Video - 00:5:54 mins
Lesson 027 Handling Errors
Video - 00:5:22 mins
Lesson 028 Handling Not Found States
Video - 00:1:57 mins
Lesson 029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Video - 00:11:4 mins
Lesson 030 Throwing Not Found Errors For Individual Meals
Video - 00:2:3 mins
Lesson 031 Getting Started with the Share Meal Form
Video - 00:1:53 mins
Lesson 032 Getting Started with a Custom Image Picker Input Component
Video - 00:8:28 mins
Lesson 033 Adding an Image Preview to the Picker
Video - 00:6:00 mins
Lesson 035 Introducing & Using Server Actions for Handling Form Submissions
Video - 00:9:2 mins
Lesson 036 Storing Server Actions in Separate Files
Video - 00:3:45 mins
Lesson 037 Creating a Slug & Sanitizing User Input for XSS Protection
Video - 00:3:20 mins
Lesson 038 Storing Uploaded Images & Storing Data in the Database
Video - 00:12:56 mins
Lesson 039 Managing the Form Submission Status with useFormStatus
Video - 00:5:30 mins
Lesson 040 Adding Server-Side Input Validation
Video - 00:5:54 mins
Lesson 042 Working with Server Action Responses & useFormState
Video - 00:8:5 mins
Lesson 043 Building For Production & Understanding NextJS Caching
Video - 00:6:6 mins
Lesson 044 Triggering Cache Revalidations
Video - 00:3:57 mins
Lesson 045 Don't Store Files Locally On The Filesystem!
Video - 00:2:13 mins
Lesson 047 Adding Static Metadata
Video - 00:3:47 mins
Lesson 048 Adding Dynamic Metadata
Video - 00:2:20 mins
Lesson 049 Module Summary
Video - 00:4:25 mins
04 – Routing & Page Rendering – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:37 mins
Lesson 002 Project Setup, Overview & An Exercise!
Video - 00:4:17 mins
Lesson 003 Exercise Solution - Part 1
Video - 00:7:17 mins
Lesson 004 Exercise Solution - Part 2
Video - 00:4:56 mins
Lesson 005 App Styling & Using Dummy Data
Video - 00:8:59 mins
Lesson 006 Handling Not Found Errors & Showing Not Found Pages
Video - 00:4:39 mins
Lesson 007 Setting Up & Using Parallel Routes
Video - 00:6:40 mins
Lesson 008 Working with Parallel Routes & Nested Routes
Video - 00:12:50 mins
Lesson 009 Configuring Catch-All Routes
Video - 00:6:1 mins
Lesson 010 Catch-All Fallback Routes & Dealing With Multiple Path Segments
Video - 00:9:21 mins
Lesson 011 Throwing (Route-related) Errors
Video - 00:3:38 mins
Lesson 012 Handling Errors With Error Pages
Video - 00:3:2 mins
Lesson 013 Server vs Client Components
Video - 00:10:10 mins
Lesson 014 Nested Routes Inside Dynamic Routes
Video - 00:4:56 mins
Lesson 015 Intercepting Navigation & Using Interception Routes
Video - 00:5:11 mins
Lesson 016 Combining Parallel & Intercepting Routes
Video - 00:7:42 mins
Lesson 018 Navigating Programmatically
Video - 00:2:42 mins
Lesson 019 Using & Understanding Route Groups
Video - 00:6:39 mins
Lesson 020 Building APIs with Route Handlers
Video - 00:5:15 mins
Lesson 021 Using Middleware
Video - 00:5:40 mins
Lesson 022 Module Summary
Video - 00:00:30 mins
05 – Data Fetching – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:00:56 mins
Lesson 002 Adding a Backend
Video - 00:2:46 mins
Lesson 003 Option 1 Client-side Data Fetching
Video - 00:8:50 mins
Lesson 004 Option 2 Server-side Data Fetching
Video - 00:5:36 mins
Lesson 005 Why Use A Separate Backend Fetching Directly From The Source!
Video - 00:6:14 mins
Lesson 006 Showing a Loading Fallback
Video - 00:4:50 mins
Lesson 007 Migrating An Entire Application To A Local Data Source (Database)
Video - 00:13:19 mins
Lesson 008 Granular Data Fetching With Suspense
Video - 00:11:35 mins
06 – Mutating Data – Deep Dive
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:11 mins
Lesson 002 Starting Project & Analyzing Mutation Options
Video - 00:5:46 mins
Lesson 003 Setting Up A Form Action
Video - 00:9:19 mins
Lesson 004 Creating a Server Action
Video - 00:4:16 mins
Lesson 005 Storing Data in Databases
Video - 00:4:39 mins
Lesson 006 Providing User Feedback with The useFormStatus Hook
Video - 00:6:4 mins
Lesson 008 Validating User Input With Help Of The useFormState Hook
Video - 00:9:57 mins
Lesson 009 Adjusting Server Actions for useFormState
Video - 00:7:40 mins
Lesson 010 Storing Server Actions In Separate Files
Video - 00:3:57 mins
Lesson 012 Uploading & Storing Images
Video - 00:8:13 mins
Lesson 013 Alternative Ways of Using, Configuring & Triggering Server Actions
Video - 00:11:00 mins
Lesson 014 Revalidating Data To Avoid Caching Problems
Video - 00:4:45 mins
Lesson 015 Performing Optimistic Updates With NextJS
Video - 00:11:42 mins
Lesson 016 Caching Differences Development vs Production
Video - 00:6:13 mins
07 – Understanding & Configuring Caching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:9 mins
Lesson 002 Making Sense of NextJS' Caching Types
Video - 00:5:13 mins
Lesson 003 Project Setup
Video - 00:1:45 mins
Lesson 004 Handling Request Memoization
Video - 00:5:31 mins
Lesson 005 Understanding The Data Cache & Cache Settings
Video - 00:5:50 mins
Lesson 006 Controlling Data Caching
Video - 00:5:27 mins
Lesson 007 Making Sense Of The Full Route Cache
Video - 00:4:42 mins
Lesson 008 On-Demand Cache Invalidation with revalidatePath & revalidateTag
Video - 00:6:3 mins
Lesson 009 Setting Up Request Memoization For Custom Data Sources
Video - 00:7:15 mins
Lesson 010 Setting Up Data Caching For Custom Data Sources
Video - 00:3:44 mins
Lesson 011 Invalidating Custom Data Source Data
Video - 00:3:32 mins
Lesson 012 Module Summary
Video - 00:1:44 mins
08 – NextJS App Optimizations
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:8 mins
Lesson 002 Using the NextJS Image Component
Video - 00:3:43 mins
Lesson 003 Understanding the NextJS Image Component
Video - 00:5:15 mins
Lesson 004 Controlling the Image Size
Video - 00:4:45 mins
Lesson 005 Working with Priority Images & More Settings
Video - 00:3:3 mins
Lesson 006 Loading Unknown Images
Video - 00:4:12 mins
Lesson 007 Configuring CSS For Images With The fill Prop
Video - 00:3:3 mins
Lesson 008 Using An Image Loader & Cloudinary Resizing
Video - 00:15:51 mins
Lesson 009 Page Metadata - An Introduction
Video - 00:1:4 mins
Lesson 010 Configuring Static Page Metadata
Video - 00:2:57 mins
Lesson 011 Configuring Dynamic Page Metadata
Video - 00:5:3 mins
Lesson 012 Understanding Layout Metadata
Video - 00:1:38 mins
09 – User Authentication
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:4 mins
Lesson 002 Project Setup
Video - 00:3:26 mins
Lesson 003 User Signup Extracting & Validating User Input
Video - 00:14:35 mins
Lesson 004 Storing Users in a Database - The Wrong Way
Video - 00:4:30 mins
Lesson 005 Hashing Passwords & Storing User Data The Right Way
Video - 00:2:7 mins
Lesson 006 Checking for Email Duplication
Video - 00:5:1 mins
Lesson 007 Theory How Does User Authentication Work
Video - 00:5:21 mins
Lesson 008 Choosing a Third-Party Auth Package (Lucia)
Video - 00:2:54 mins
Lesson 009 Creating a New Lucia Auth Instance
Video - 00:4:32 mins
Lesson 010 Configuring A Session & A Session Cookie
Video - 00:4:51 mins
Lesson 011 Setting Up An Auth Session
Video - 00:3:44 mins
Lesson 012 Verifying An Active Auth Session
Video - 00:7:15 mins
Lesson 013 Protecting Routes Against Unauthenticated Access
Video - 00:3:7 mins
Lesson 014 Switching Auth Modes With Query Parameters (Search Params)
Video - 00:5:35 mins
Lesson 015 Adding User Login (via a Server Action)
Video - 00:5:34 mins
Lesson 016 Triggering Different Server Actions via Query Parameters
Video - 00:3:44 mins
Lesson 017 Adding an Auth-only Layout
Video - 00:3:41 mins
Lesson 019 Adding User Logout
Video - 00:4:10 mins
10 – Roundup & Next Steps
11 – Pages & File-based Routing
Download Attachment
Reading
Lesson 001 From App Router To Pages Router
Video - 00:1:40 mins
Lesson 003 Module Introduction
Video - 00:1:12 mins
Lesson 004 Our Starting Setup
Video - 00:1:19 mins
Lesson 005 What Is File-based Routing And Why Is It Helpful
Video - 00:5:22 mins
Lesson 006 Adding A First Page
Video - 00:4:1 mins
Lesson 007 Adding a Named Static Route File
Video - 00:1:34 mins
Lesson 008 Working with Nested Paths & Routes
Video - 00:3:33 mins
Lesson 009 Adding Dynamic Paths & Routes
Video - 00:4:54 mins
Lesson 010 Extracting Dynamic Path Segment Data (Dynamic Routes)
Video - 00:4:54 mins
Lesson 011 Building Nested Dynamic Routes & Paths
Video - 00:7:12 mins
Lesson 012 Adding Catch-All Routes
Video - 00:5:44 mins
Lesson 013 Navigating with the Link Component
Video - 00:5:44 mins
Lesson 014 Navigating To Dynamic Routes
Video - 00:3:41 mins
Lesson 015 A Different Way Of Setting Link Hrefs
Video - 00:2:55 mins
Lesson 016 Navigating Programmatically
Video - 00:3:50 mins
Lesson 017 Adding a Custom 404 Page
Video - 00:1:35 mins
Lesson 018 Module Summary
Video - 00:5:51 mins
12 – Project Time Working with File-based Routing
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:2:4 mins
Lesson 002 Planning The Project
Video - 00:4:15 mins
Lesson 003 Setting Up The Main Pages
Video - 00:7:35 mins
Lesson 004 Adding Dummy Data & Static Files
Video - 00:4:46 mins
Lesson 005 Adding Regular React Components
Video - 00:7:14 mins
Lesson 006 Adding More React Components & Connecting Components
Video - 00:10:22 mins
Lesson 007 Styling Components In Next.js Projects
Video - 00:9:28 mins
Lesson 009 Adding Buttons & Icons
Video - 00:8:26 mins
Lesson 010 Adding the Event Detail Page (Dynamic Route)
Video - 00:8:31 mins
Lesson 011 Adding a General Layout Wrapper Component
Video - 00:6:27 mins
Lesson 012 Working on the All Events Page
Video - 00:2:5 mins
Lesson 013 Adding a Filter Form for Filtering Events
Video - 00:8:25 mins
Lesson 014 Navigating to the Filtered Events Page Progammatically
Video - 00:8:25 mins
Lesson 015 Extracting Data on the Catch-All Page
Video - 00:8:54 mins
Lesson 016 Final Steps
Video - 00:7:2 mins
Lesson 017 Module Summary
Video - 00:1:40 mins
13 – Page Pre-Rendering & Data Fetching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:2:25 mins
Lesson 002 The Problem With Traditional React Apps (and Data Fetching)
Video - 00:5:15 mins
Lesson 003 How NextJS Prepares & Pre-renders Pages
Video - 00:5:38 mins
Lesson 004 Introducing Static Generation with getStaticProps
Video - 00:4:4 mins
Lesson 005 NextJS Pre-renders By Default!
Video - 00:3:8 mins
Lesson 006 Adding getStaticProps To Pages
Video - 00:6:39 mins
Lesson 007 Running Server-side Code & Using the Filesystem
Video - 00:7:41 mins
Lesson 008 A Look Behind The Scenes
Video - 00:5:20 mins
Lesson 009 Utilizing Incremental Static Generation (ISR)
Video - 00:7:22 mins
Lesson 010 ISR A Look Behind The Scenes
Video - 00:3:45 mins
Lesson 011 A Closer Look At getStaticProps & Configuration Options
Video - 00:4:20 mins
Lesson 012 Working With Dynamic Parameters
Video - 00:9:46 mins
Lesson 013 Introducing getStaticPaths For Dynamic Pages
Video - 00:3:44 mins
Lesson 014 Using getStaticPaths
Video - 00:3:27 mins
Lesson 015 getStaticPaths & Link Prefetching Behind The Scenes
Video - 00:3:59 mins
Lesson 016 Working With Fallback Pages
Video - 00:5:27 mins
Lesson 017 Loading Paths Dynamically
Video - 00:4:2 mins
Lesson 018 Fallback Pages & Not Found Pages
Video - 00:5:53 mins
Lesson 019 Introducing getServerSideProps for Server-side Rendering (SSR)
Video - 00:4:14 mins
Lesson 020 Using getServerSideProps for Server-side Rendering
Video - 00:4:5 mins
Lesson 021 getServerSideProps and its Context
Video - 00:4:20 mins
Lesson 022 Dynamic Pages & getServerSideProps
Video - 00:4:4 mins
Lesson 023 getServerSideProps Behind The Scenes
Video - 00:3:25 mins
Lesson 024 Introducing Client-Side Data Fetching (And When To Use It)
Video - 00:3:40 mins
Lesson 025 Implementing Client-Side Data Fetching
Video - 00:14:47 mins
Lesson 027 Using the useSWR NextJS Hook
Video - 00:8:58 mins
Lesson 028 Combining Pre-Fetching With Client-Side Fetching
Video - 00:8:55 mins
Lesson 029 Module Summary
Video - 00:6:45 mins
14 – Project Time Page Pre-rendering & Data Fetching
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:4 mins
Lesson 002 Preparations
Video - 00:5:1 mins
Lesson 003 Adding Static Site Generation (SSG) On The Home Page
Video - 00:11:2 mins
Lesson 004 Loading Data & Paths For Dynamic Pages
Video - 00:9:50 mins
Lesson 005 Optimizing Data Fetching
Video - 00:7:47 mins
Lesson 006 Working on the All Events Page
Video - 00:2:47 mins
Lesson 007 Using Server-side Rendering (SSR)
Video - 00:9:52 mins
Lesson 008 Adding Client-Side Data Fetching
Video - 00:10:55 mins
Lesson 009 Module Summary
Video - 00:1:30 mins
15 – Optimizing NextJS Apps
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:19 mins
Lesson 002 Analyzing the Need for head Metadata
Video - 00:1:49 mins
Lesson 003 Configuring the head Content
Video - 00:3:41 mins
Lesson 004 Adding Dynamic head Content
Video - 00:5:17 mins
Lesson 005 Reusing Logic Inside A Component
Video - 00:4:22 mins
Lesson 006 Working with the _app.js File (and Why)
Video - 00:3:4 mins
Lesson 007 Merging head Content
Video - 00:3:17 mins
Lesson 008 The _document.js File (And What It Does)
Video - 00:5:31 mins
Lesson 009 A Closer Look At Our Images
Video - 00:1:59 mins
Lesson 010 Optimizing Images with the Next Image Component & Feature
Video - 00:8:37 mins
Lesson 011 Taking A Look At The Next Image Documentation
Video - 00:00:51 mins
Lesson 012 Module Summary
Video - 00:1:16 mins
16 – Adding Backend Code with API Routes (Fullstack React)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:00:51 mins
Lesson 002 What are API Routes
Video - 00:5:38 mins
Lesson 003 Writing Our First API Route
Video - 00:8:24 mins
Lesson 004 Preparing the Frontend Form
Video - 00:6:29 mins
Lesson 005 Parsing The Incoming Request & Executing Server-side Code
Video - 00:10:16 mins
Lesson 006 Sending Requests To API Routes
Video - 00:5:43 mins
Lesson 007 Using API Routes To Get Data
Video - 00:7:56 mins
Lesson 008 Using API Routes For Pre-Rendering Pages
Video - 00:8:4 mins
Lesson 009 Creating & Using Dynamic API Routes
Video - 00:13:41 mins
Lesson 010 Exploring Different Ways Of Structuring API Route Files
Video - 00:5:9 mins
Lesson 011 Module Summary
Video - 00:1:44 mins
17 – Project Time API Routes
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:31 mins
Lesson 002 Starting Setup & A Challenge For You!
Video - 00:5:15 mins
Lesson 003 Adding a Newsletter Route
Video - 00:11:10 mins
Lesson 004 Adding Comments API Routes
Video - 00:8:43 mins
Lesson 005 Connecting the Frontend To the Comments API Routes
Video - 00:10:59 mins
Lesson 006 Setting Up A MongoDB Database
Video - 00:5:42 mins
Lesson 007 Running MongoDB Queries From Inside API Routes
Video - 00:9:14 mins
Lesson 008 Inserting Comments Into The Database
Video - 00:6:26 mins
Lesson 009 Getting Data From The Database
Video - 00:4:31 mins
Lesson 010 Adding Error Handling
Video - 00:7:33 mins
Lesson 011 More Error Handling
Video - 00:10:48 mins
Lesson 013 Module Summary
Video - 00:1:45 mins
18 – Working with App-wide State (React Context)
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:27 mins
Lesson 002 Our Target State & Starting Project
Video - 00:4:32 mins
Lesson 003 Creating a New React Context
Video - 00:5:37 mins
Lesson 004 Adding Context State
Video - 00:3:49 mins
Lesson 005 Using Context Data In Components
Video - 00:4:37 mins
Lesson 006 Example Triggering & Showing Notifications
Video - 00:6:35 mins
Lesson 007 Example Removing Notifications (Automatically)
Video - 00:6:31 mins
Lesson 008 Challenge Solution
Video - 00:7:22 mins
Lesson 009 Module Summary
Video - 00:1:9 mins
19 – Complete App Example Build a Full Blog A to Z
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:00 mins
Lesson 002 Setting Up The Core Pages
Video - 00:5:10 mins
Lesson 003 Getting Started With The Home Page
Video - 00:5:29 mins
Lesson 004 Adding The Hero Component
Video - 00:8:47 mins
Lesson 005 Adding Layout & Navigation
Video - 00:8:45 mins
Lesson 006 Time To Add Styling & A Logo
Video - 00:3:18 mins
Lesson 007 Starting Work On The Featured Posts Part
Video - 00:5:47 mins
Lesson 008 Adding A Post Grid & Post Items
Video - 00:9:41 mins
Lesson 009 Rendering Dummy Post Data
Video - 00:12:25 mins
Lesson 010 Adding the All Posts Page
Video - 00:3:59 mins
Lesson 011 Working On The Post Detail Page
Video - 00:10:10 mins
Lesson 012 Rendering Markdown As JSX
Video - 00:2:30 mins
Lesson 013 Adding Markdown Files As A Data Source
Video - 00:7:32 mins
Lesson 014 Adding Functions To Read & Fetch Data From Markdown Files
Video - 00:13:40 mins
Lesson 015 Using Markdown Data For Rendering Posts
Video - 00:8:19 mins
Lesson 016 Rendering Dynamic Post Pages & Paths
Video - 00:11:42 mins
Lesson 018 Rendering Images With The Next Image Component (From Markdown)
Video - 00:12:46 mins
Lesson 019 Rendering Code Snippets From Markdown
Video - 00:6:29 mins
Lesson 020 Preparing The Contact Form
Video - 00:4:18 mins
Lesson 021 Adding The Contact API Route
Video - 00:4:26 mins
Lesson 022 Sending Data From The Client To The API Route
Video - 00:7:26 mins
Lesson 023 Storing Messages With MongoDB In A Database
Video - 00:8:52 mins
Lesson 024 Adding UI Feedback With Notifications
Video - 00:15:5 mins
Lesson 025 Adding head Data
Video - 00:6:52 mins
Lesson 026 Adding A _document.js File
Video - 00:2:55 mins
Lesson 027 Using React Portals
Video - 00:3:45 mins
Lesson 028 Module Summary
Video - 00:1:24 mins
20 – Deploying NextJS Apps
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:17 mins
Lesson 002 Building NextJS Apps Your Options
Video - 00:8:5 mins
Lesson 003 Key Deployment Steps
Video - 00:3:6 mins
Lesson 004 Checking & Optimizing Our Code
Video - 00:3:11 mins
Lesson 005 The NextJS Config File & Working With Environment Variables
Video - 00:14:26 mins
Lesson 006 Running a Test Build & Reducing Code Size
Video - 00:7:21 mins
Lesson 007 A Full Deployment Example (To Vercel)
Video - 00:17:40 mins
Lesson 008 A Note On Github & Secret Credentials
Video - 00:1:57 mins
Lesson 009 Using the export Feature
Video - 00:2:16 mins
Lesson 010 Module Summary
Video - 00:00:38 mins
21 – Adding Authentication
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:1:16 mins
Lesson 002 Our Starting Project
Video - 00:1:45 mins
Lesson 003 How Does Authentication Work (In React & NextJS Apps)
Video - 00:14:23 mins
Lesson 005 Using The next-auth Library
Video - 00:3:4 mins
Lesson 006 Adding A User Signup API Route
Video - 00:12:59 mins
Lesson 007 Sending Signup Requests From The Frontend
Video - 00:9:41 mins
Lesson 008 Improving Signup With Unique Email Addresses
Video - 00:3:00 mins
Lesson 009 Adding the Credentials Auth Provider & User Login Logic
Video - 00:14:8 mins
Lesson 010 Sending a Signin Request From The Frontend
Video - 00:6:52 mins
Lesson 011 Managing Active Session (On The Frontend)
Video - 00:5:57 mins
Lesson 012 Adding User Logout
Video - 00:2:18 mins
Lesson 013 Adding Client-Side Page Guards (Route Protection)
Video - 00:7:50 mins
Lesson 014 Adding Server-Side Page Guards (And When To Use Which Approach)
Video - 00:7:41 mins
Lesson 015 Protecting the Auth Page
Video - 00:5:46 mins
Lesson 016 Using the next-auth Session Provider Component
Video - 00:5:14 mins
Lesson 017 Analyzing Further Authentication Requirements
Video - 00:3:42 mins
Lesson 018 Protecting API Routes
Video - 00:6:37 mins
Lesson 019 Adding the Change Password Logic
Video - 00:10:36 mins
Lesson 020 Sending a Change Password Request From The Frontend
Video - 00:9:16 mins
Lesson 021 Module Summary & Final Steps
Video - 00:3:29 mins
22 – Optional NextJS Summary
Download Attachment
Reading
Lesson 001 Module Introduction
Video - 00:3:3 mins
Lesson 002 What is NextJS
Video - 00:4:45 mins
Lesson 003 Key Feature Server-side (Pre-) Rendering of Pages
Video - 00:6:38 mins
Lesson 004 Key Feature File-based Routing
Video - 00:3:13 mins
Lesson 005 Key Feature Build Fullstack Apps With Ease
Video - 00:1:50 mins
Lesson 006 Creating a NextJS Project & IDE Setup
Video - 00:6:14 mins
Lesson 007 About the App Router
Video - 00:2:47 mins
Lesson 008 Analyzing the Created Project
Video - 00:2:52 mins
Lesson 009 Adding First Pages To The Project
Video - 00:6:6 mins
Lesson 010 Adding Nested Pages Paths
Video - 00:3:47 mins
Lesson 011 Creating Dynamic Pages
Video - 00:3:36 mins
Lesson 012 Extracting Dynamic Route Data
Video - 00:4:7 mins
Lesson 013 Linking Between Pages
Video - 00:7:13 mins
Lesson 014 Onwards To A Bigger Project!
Video - 00:3:32 mins
Lesson 015 Preparing Our Project Pages
Video - 00:3:42 mins
Lesson 016 Rendering A List Of (Dummy) Meetups
Video - 00:5:4 mins
Lesson 017 Adding A Form For Adding Meetups
Video - 00:3:55 mins
Lesson 018 The _app.js File & Wrapper Components
Video - 00:6:17 mins
Lesson 019 Programmatic Navigation
Video - 00:3:47 mins
Lesson 020 Adding Custom Components & Styling With CSS Modules
Video - 00:10:00 mins
Lesson 021 How NextJS Page Pre-Rendering Actually Works
Video - 00:5:52 mins
Lesson 022 Introducing Data Fetching For Page Generation (getStaticProps)
Video - 00:8:56 mins
Lesson 023 More Static Site Generation (SSG) With getStaticProps
Video - 00:5:44 mins
Lesson 024 Exploring getServerSideProps
Video - 00:6:27 mins
Lesson 025 Working With Dynamic Path Params In getStaticProps
Video - 00:5:14 mins
Lesson 026 Dynamic Pages & getStaticProps & getStaticPaths
Video - 00:7:16 mins
Lesson 027 Introducing API Routes
Video - 00:6:21 mins
Lesson 028 Connecting & Querying a MongoDB Database
Video - 00:9:32 mins
Lesson 029 Sending HTTP Requests To API Routes
Video - 00:6:49 mins
Download Vietnamese subtitle: Click here
Download English subtitle: Click here
Finish Course Early?
You have not completed all required lessons and assessments.
Your Progress
0%
