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

Got stuck? Have an error in your code? Can’t reproduce the results shown in the lectures?

Compare your code to mine – below you find links to my code.

Important: You can switch between different “code snapshots” by clicking on “X Commits” (where X is a number)

Course Section Code: https://github.com/mschwarzmueller/nextjs-course-code/tree/02-file-based-routing

Extra Files: https://github.com/mschwarzmueller/nextjs-course-code/tree/02-file-based-routing-extra-files

Join the conversation
Previous
Next

Please contact me via telegram

DMCA.com Protection Status