Course Content
Subtitle Guide – Hướng dẫn thêm phụ đề
0/1
Set up subtitle for video – Hướng dẫn thêm phụ đề
01 – Getting Started
0/10
Subtitle File Resource
001 Welcome To The Course!
01:20
002 What Is NextJS Why Would You Use It
02:20
003 Key Features & Benefits Of NextJS
02:40
004 Creating a First NextJS App
04:25
005 NextJS vs Just React – Analyzing The NextJS Project
02:30
006 Editing The First App
02:21
007 Pages Router vs App Router – One Framework, Two Approaches
02:29
008 How To Get The Most Out Of This Course
03:05
009 Learning Community & Course Resources
02 – Optional React Refresher
0/77
Subtitle File Resource
001 Using the Code Snasphots
002 Module Introduction
01:08
003 What Is React & Why Would You Use It
05:37
004 React Projects – Requirements
02:09
005 Creating React Projects
03:27
006 Our Starting Project
03:28
007 Understanding How React Works
07:46
008 Building A First Custom Component
11:15
009 Outputting Dynamic Values
05:03
010 Reusing Components
06:00
011 Passing Data to Components with Props
06:15
012 CSS Styling & CSS Modules
10:07
012 Post.module.css
013 Exercise & Another Component
06:31
014 Preparing the App For State Management
03:45
015 Adding Event Listeners
07:52
016 Working with State
10:00
017 Lifting State Up
09:08
018 The Special children Prop
07:21
019 State & Conditional Content
08:59
020 Adding a Shared Header & More State Management
07:51
021 Adding Form Buttons
03:34
022 Handling Form Submission
06:18
023 Updating State Based On Previous State
05:30
024 Outputting List Data
06:38
025 Adding a Backend to the React SPA
06:10
026 Sending a POST HTTP Request
04:12
027 Handling Side Effects with useEffect()
09:06
028 Handle Loading State
04:23
029 Understanding & Adding Routing
03:55
030 Adding Routes
05:36
031 Working with Layout Routes
04:08
032 Refactoring Route Components & More Nesting
05:35
033 Linking & Navigating
08:09
034 Data Fetching via loader()s
09:07
035 Submitting Data with action()s
11:07
036 Dynamic Routes
08:41
037 Module Summary
01:25
038 IMPORTANT — LEGACY CONTENT BELOW
039 Module Introduction
01:27
040 What is ReactJS
03:48
041 Why ReactJS & A First Demo
07:25
042 Building Single-Page Applications (SPAs)
02:00
043 React Alternatives
03:06
044 Creating a New React Project
08:15
045 Setting Up A Code Editor
03:04
046 React 18
047 Diving Into The Created Project
06:31
048 How React Works & Understanding Components
07:36
049 More Component Work & Styling With CSS Classes
05:34
050 Building & Re-using Components
07:19
051 Passing Data With Props & Dynamic Content
05:17
052 Handling Events
06:40
053 Adding More Components
05:40
054 Introducing State
08:19
055 Working with Event Props
07:08
056 Use The Right React Router Version
057 Adding Routing
16:52
058 Adding Links & Navigation
05:21
059 Scoping Component Styles With CSS Modules
05:45
060 Outputting Lists Of Data & Components
05:50
061 Adding Even More Components
09:48
062 Creating Wrapper Components
08:39
063 Working With Forms
08:58
064 Getting User Input & Handling Form Submission
09:45
065 Preparing The App For Http Requests & Adding a Backend
06:52
066 Sending a POST Http Request
05:18
067 Navigating Programmatically
03:42
068 Getting Started with Fetching Data
09:25
069 Using the useEffect Hook
10:08
070 Introducing React Context
11:02
071 Updating State Based On Previous State
05:54
072 Using Context In Components
12:10
073 More Context Usage
06:54
074 Module Summary
01:00
075 Module Resources
03 – NextJS Essentials (App Router)
0/49
Subtitle File Resource
001 Module Introduction
01:20
002 Starting Setup
02:32
003 Understanding File-based Routing & React Server Components
02:45
004 Adding Another Route via the File System
03:06
005 Navigating Between Pages – Wrong & Right Solution
04:12
006 Working with Pages & Layouts
03:21
007 Reserved File Names, Custom Components & How To Organize A NextJS Project
06:31
008 Reserved Filenames
00:00
009 Configuring Dynamic Routes & Using Route Parameters
06:17
010 Onwards to the Main Project The Foodies App
01:24
011 Exercise Your Task
02:03
012 Exercise Solution
08:19
013 Revisiting The Concept Of Layouts
03:50
014 Adding a Custom Component To A Layout
05:58
015 Styling NextJS Project Your Options & Using CSS Modules
06:00
016 Optimizing Images with the NextJS Image Component
04:57
017 Using More Custom Components
03:48
018 Populating The Starting Page Content
04:18
019 Preparing an Image Slideshow
03:25
020 React Server Components vs Client Components – When To Use What
08:15
021 Using Client Components Efficiently
11:07
022 Outputting Meals Data & Images With Unknown Dimensions
10:31
023 Setting Up A SQLite Database
03:11
024 Fetching Data By Leveraging NextJS & Fullstack Capabilities
07:17
025 Adding A Loading Page
04:00
026 Using Suspense & Streamed Responses For Granular Loading State Management
05:54
027 Handling Errors
05:22
028 Handling Not Found States
01:57
029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
11:03
030 Throwing Not Found Errors For Individual Meals
02:03
031 Getting Started with the Share Meal Form
01:53
032 Getting Started with a Custom Image Picker Input Component
08:28
033 Adding an Image Preview to the Picker
05:59
034 Improving the Image Picker Component
00:00
035 Introducing & Using Server Actions for Handling Form Submissions
09:02
036 Storing Server Actions in Separate Files
03:45
037 Creating a Slug & Sanitizing User Input for XSS Protection
03:20
038 Storing Uploaded Images & Storing Data in the Database
12:56
039 Managing the Form Submission Status with useFormStatus
05:30
040 Adding Server-Side Input Validation
05:54
041 Working with Server Action Responses & useFormState
08:05
042 Building For Production & Understanding NextJS Caching
06:06
043 Triggering Cache Revalidations
03:57
044 Don’t Store Files Locally On The Filesystem!
02:13
045 Bonus Storing Uploaded Images In The Cloud (AWS S3)
046 Adding Static Metadata
03:47
047 Adding Dynamic Metadata
02:20
048 Module Summary
04:25
04 – Pages & File-based Routing
0/20
Subtitle File Resource
001 From App Router To Pages Router
01:38
002 Using The Code Snapshots
003 Module Introduction
01:12
004 Our Starting Setup
01:19
005 What Is File-based Routing And Why Is It Helpful
05:22
006 Adding A First Page
04:01
007 Adding a Named Static Route File
01:34
008 Working with Nested Paths & Routes
03:33
009 Adding Dynamic Paths & Routes
04:54
010 Extracting Dynamic Path Segment Data (Dynamic Routes)
04:54
011 Building Nested Dynamic Routes & Paths
07:12
012 Adding Catch-All Routes
05:44
013 Navigating with the Link Component
05:44
014 Navigating To Dynamic Routes
03:41
015 A Different Way Of Setting Link Hrefs
02:55
016 Navigating Programmatically
03:50
017 Adding a Custom 404 Page
01:35
018 Module Summary
05:51
019 Module Resources
00:00
05 – Project Time Working with File-based Routing
0/19
Subtitle File Resource
001 Module Introduction
02:04
002 Planning The Project
04:15
003 Setting Up The Main Pages
07:35
004 Adding Dummy Data & Static Files
04:46
005 Adding Regular React Components
07:14
006 Adding More React Components & Connecting Components
10:22
007 Styling Components In Next.js Projects
09:28
008 Link & NextJS 13
009 Adding Buttons & Icons
08:25
010 Adding the Event Detail Page (Dynamic Route)
08:31
011 Adding a General Layout Wrapper Component
06:27
012 Working on the All Events Page
02:05
013 Adding a Filter Form for Filtering Events
08:25
014 Navigating to the Filtered Events Page Progammatically
08:25
015 Extracting Data on the Catch-All Page
08:54
016 Final Steps
07:02
017 Module Summary
01:40
018 Module Resources
06 – Page Pre-Rendering & Data Fetching
0/31
Subtitle File Resource
001 Module Introduction
02:25
002 The Problem With Traditional React Apps (and Data Fetching)
05:15
003 How NextJS Prepares & Pre-renders Pages
05:38
004 Introducing Static Generation with getStaticProps
04:04
005 NextJS Pre-renders By Default!
03:08
006 Adding getStaticProps To Pages
06:39
007 Running Server-side Code & Using the Filesystem
07:41
008 A Look Behind The Scenes
05:20
009 Utilizing Incremental Static Generation (ISR)
07:22
010 ISR A Look Behind The Scenes
03:45
011 A Closer Look At getStaticProps & Configuration Options
04:20
012 Working With Dynamic Parameters
09:46
013 Introducing getStaticPaths For Dynamic Pages
03:44
014 Using getStaticPaths
03:27
015 getStaticPaths & Link Prefetching Behind The Scenes
03:59
016 Working With Fallback Pages
05:27
017 Loading Paths Dynamically
04:02
018 Fallback Pages & Not Found Pages
05:53
019 Introducing getServerSideProps for Server-side Rendering (SSR)
04:14
020 Using getServerSideProps for Server-side Rendering
04:05
021 getServerSideProps and its Context
04:20
022 Dynamic Pages & getServerSideProps
04:04
023 getServerSideProps Behind The Scenes
03:25
024 Introducing Client-Side Data Fetching (And When To Use It)
03:40
025 Implementing Client-Side Data Fetching
14:47
026 A Note About useSWR
027 Using the useSWR NextJS Hook
08:58
028 Combining Pre-Fetching With Client-Side Fetching
08:55
029 Module Summary
06:45
030 Module Resources
07 – Project Time Page Pre-rendering & Data Fetching
0/11
Subtitle File Resource
001 Module Introduction
01:04
002 Preparations
05:01
003 Adding Static Site Generation (SSG) On The Home Page
11:02
004 Loading Data & Paths For Dynamic Pages
09:50
005 Optimizing Data Fetching
07:47
006 Working on the All Events Page
02:47
007 Using Server-side Rendering (SSR)
09:52
008 Adding Client-Side Data Fetching
10:55
009 Module Summary
01:30
010 Module Resources
08 – Optimizing NextJS Apps
0/14
Subtitle File Resource
001 Module Introduction
01:19
002 Analyzing the Need for head Metadata
01:49
003 Configuring the head Content
03:41
004 Adding Dynamic head Content
05:17
005 Reusing Logic Inside A Component
04:22
006 Working with the _app.js File (and Why)
03:04
007 Merging head Content
03:17
008 The _document.js File (And What It Does)
05:31
009 A Closer Look At Our Images
01:59
010 Optimizing Images with the Next Image Component & Feature
08:37
011 Taking A Look At The Next Image Documentation
00:51
012 Module Summary
01:16
013 Module Resources
09 – Adding Backend Code with API Routes (Fullstack React)
0/13
Subtitle File Resource
001 Module Introduction
00:51
002 What are API Routes
05:38
003 Writing Our First API Route
08:24
004 Preparing the Frontend Form
06:29
005 Parsing The Incoming Request & Executing Server-side Code
10:16
006 Sending Requests To API Routes
05:43
007 Using API Routes To Get Data
07:56
008 Using API Routes For Pre-Rendering Pages
08:04
009 Creating & Using Dynamic API Routes
13:41
010 Exploring Different Ways Of Structuring API Route Files
05:09
011 Module Summary
01:44
012 Module Resources
10 – Project Time API Routes
0/15
Subtitle File Resource
001 Module Introduction
01:31
002 Starting Setup & A Challenge For You!
05:15
003 Adding a Newsletter Route
11:10
004 Adding Comments API Routes
08:43
006 Setting Up A MongoDB Database
05:42
007 Running MongoDB Queries From Inside API Routes
09:14
008 Inserting Comments Into The Database
06:26
009 Getting Data From The Database
04:31
010 Adding Error Handling
07:33
011 More Error Handling
10:48
012 A Final Note On MongoDB Connections
013 Module Summary
01:45
014 Improvement Getting Comments For A Specific Event
015 Module Resources
11 – Working with App-wide State (React Context)
0/11
Subtitle File Resource
001 Module Introduction
01:27
002 Our Target State & Starting Project
04:32
003 Creating a New React Context
05:37
004 Adding Context State
03:49
005 Using Context Data In Components
04:37
006 Example Triggering & Showing Notifications
06:35
007 Example Removing Notifications (Automatically)
06:31
008 Challenge Solution
07:22
009 Module Summary
01:09
010 Module Resources
12 – Complete App Example Build a Full Blog A to Z
0/30
Subtitle File Resource
001 Module Introduction
02:59
002 Setting Up The Core Pages
05:10
003 Getting Started With The Home Page
05:29
004 Adding The Hero Component
08:47
005 Adding Layout & Navigation
08:45
006 Time To Add Styling & A Logo
03:18
007 Starting Work On The Featured Posts Part
05:47
008 Adding A Post Grid & Post Items
09:41
009 Rendering Dummy Post Data
12:25
010 Adding the All Posts Page
03:59
011 Working On The Post Detail Page
10:10
012 Rendering Markdown As JSX
02:30
013 Adding Markdown Files As A Data Source
07:32
014 Adding Functions To Read & Fetch Data From Markdown Files
13:40
015 Using Markdown Data For Rendering Posts
08:19
016 Rendering Dynamic Post Pages & Paths
11:42
017 Rendering Custom HTML Elements with React Markdown
018 Rendering Images With The Next Image Component (From Markdown)
12:46
019 Rendering Code Snippets From Markdown
06:29
020 Preparing The Contact Form
04:18
021 Adding The Contact API Route
04:26
022 Sending Data From The Client To The API Route
07:26
023 Storing Messages With MongoDB In A Database
08:52
024 Adding UI Feedback With Notifications
15:05
025 Adding head Data
06:52
026 Adding A _document.js File
02:55
027 Using React Portals
03:45
028 Module Summary
01:24
029 Module Resources
13 – Deploying NextJS Apps
0/12
Subtitle File Resource
001 Module Introduction
01:17
002 Building NextJS Apps Your Options
08:05
003 Key Deployment Steps
03:06
004 Checking & Optimizing Our Code
03:11
005 The NextJS Config File & Working With Environment Variables
14:26
006 Running a Test Build & Reducing Code Size
07:21
007 A Full Deployment Example (To Vercel)
17:40
008 A Note On Github & Secret Credentials
01:57
009 Using the export Feature
02:16
010 Module Summary
00:38
011 Module Resources
14 – Adding Authentication
0/23
Subtitle File Resource
001 Module Introduction
01:16
002 Our Starting Project
01:45
003 How Does Authentication Work (In React & NextJS Apps)
14:23
004 Must Read Install the Right next-auth Version
005 Using The next-auth Library
03:04
006 Adding A User Signup API Route
12:59
007 Sending Signup Requests From The Frontend
09:41
008 Improving Signup With Unique Email Addresses
03:00
009 Adding the Credentials Auth Provider & User Login Logic
14:08
010 Sending a Signin Request From The Frontend
06:52
011 Managing Active Session (On The Frontend)
05:57
012 Adding User Logout
02:18
013 Adding Client-Side Page Guards (Route Protection)
07:50
014 Adding Server-Side Page Guards (And When To Use Which Approach)
07:41
015 Protecting the Auth Page
05:46
016 Using the next-auth Session Provider Component
05:14
017 Analyzing Further Authentication Requirements
03:42
018 Protecting API Routes
06:37
019 Adding the Change Password Logic
10:36
020 Sending a Change Password Request From The Frontend
09:16
021 Module Summary & Final Steps
03:29
022 Module Resources
15 – Optional NextJS Summary
0/37
Subtitle File Resource
001 Module Introduction
03:03
002 What is NextJS
04:45
003 Key Feature Server-side (Pre-) Rendering of Pages
06:38
004 Key Feature File-based Routing
03:13
005 Key Feature Build Fullstack Apps With Ease
01:50
006 Creating a NextJS Project & IDE Setup
06:14
007 About the App Router
02:47
008 Analyzing the Created Project
02:52
009 Adding First Pages To The Project
06:05
010 Adding Nested Pages Paths
03:47
011 Creating Dynamic Pages
03:36
012 Extracting Dynamic Route Data
04:07
013 Linking Between Pages
07:13
014 Onwards To A Bigger Project!
03:32
015 Preparing Our Project Pages
03:42
016 Rendering A List Of (Dummy) Meetups
05:04
017 Adding A Form For Adding Meetups
03:55
018 The _app.js File & Wrapper Components
06:17
019 Programmatic Navigation
03:47
020 Adding Custom Components & Styling With CSS Modules
10:00
021 How NextJS Page Pre-Rendering Actually Works
05:52
022 Introducing Data Fetching For Page Generation (getStaticProps)
08:56
023 More Static Site Generation (SSG) With getStaticProps
05:44
024 Exploring getServerSideProps
06:27
025 Working With Dynamic Path Params In getStaticProps
05:14
026 Dynamic Pages & getStaticProps & getStaticPaths
07:16
027 Introducing API Routes
06:21
028 Connecting & Querying a MongoDB Database
09:32
029 Sending HTTP Requests To API Routes
06:49
030 Getting Data From The Database (For Page Pre-Rendering)
07:10
031 Getting Meetup Detail Data & Paths
09:41
032 Adding head Metadata To Pages
09:19
033 Deploying NextJS Projects
12:26
034 Working With Fallback Pages & Re-Deploying
04:13
035 Module Summary
02:12
036 Module Resources
16 – Course Roundup
0/1
001 Course Roundup
00:55
Next.js 14 & React – The Complete Guide
About Lesson

In the next two lectures, we’ll fine-tune ReactMarkdown to overwrite some default HTML elements it renders.

Unfortunately, since I recorded these lectures, ReactMarkdown received a major update and the shown syntax changed slightly (i.e. what will be shown in the next two lectures has to change).

But thankfully, only minor adjustments are needed.

This link here shows the differences between all the code we’ll write in the next lectures and adjustments that will be needed for React Markdown v6: https://github.com/mschwarzmueller/nextjs-course-code/compare/3b99cd0…a9fb64b

So when we write code that is marked as “red” in the linked document, you should switch to the “green” version instead (when using ReactMarkdown v6 – check your package.json file to find out which version you’re using).

Previous
Next

Please contact me via telegram

DMCA.com Protection Status