English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 448 lectures (40h 13m) | 12.76 GB
Learn NextJS 14 from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!
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!
I created the bestselling Udemy course on React, now I’m super excited to share this NextJS with you – an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!
Next.js is the production-ready, fullstack-capable framework for ReactJS – the most popular JavaScript library you can learn these days!
Too many buzzwords for your taste?
Fair enough – but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!
Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!
In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It’s a breeze with NextJS!
Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.
This course will take you from NextJS beginner to advanced level in no time!
We’ll start at the very basics, no NextJS knowledge is required at all, and we’ll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.
For this course, you’ll need basic React knowledge, though the course does come with a “React refresher” module in case it’s been some time since you last worked with React.
This course also includes a “NextJS Summary” module for the Pages router and a “NextJS Essentials” module for the App router – which allow you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take those summary modules (and skip the rest for now) to learn about all the core features in as little time as possible.
After finishing this course, you’ll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!
In detail, this course will cover:
- What is NextJS? And why would you use it?
- Why is just React (in many cases) not enough?
- Creating NextJS projects from the ground up & understanding these projects
- Working with file-based routing
- Adding dynamic routes and catch-all routes
- Implementing different forms of page pre-rendering and server-side rendering
- Working with data and adding data fetching + pre-fetching to your apps
- Handling form submissions with Server Actions
- Handling File upload
- Pre-generating dynamic and static pages
- Adding optimizations like metadata to pages
- Optimizing images with the NextJS Image component
- Building fullstack apps with API routes or Server Actions
- Managing app-wide state with React context (in NextJS apps)
- Adding authentication to NextJS apps
- Multiple complete apps where we’ll apply all these core concepts!
- A complete React.js refresher module (so that we’re all on the same page)
- A NextJS summary module so that you can refresh what you learned or just explore the core features quickly
- And much more!
Table of Contents
Getting Started
1 Welcome To The Course!
2 What Is NextJS Why Would You Use It
3 Key Features & Benefits Of NextJS
4 Creating a First NextJS App
5 NextJS vs Just React – Analyzing The NextJS Project
6 Editing The First App
7 Pages Router vs App Router – One Framework, Two Approaches
8 How To Get The Most Out Of This Course
9 Learning Community & Course Resources
Optional React Refresher
10 Using the Code Snasphots
11 Module Introduction
12 What Is React & Why Would You Use It
13 React Projects – Requirements
14 Creating React Projects
15 Our Starting Project
16 Understanding How React Works
17 Building A First Custom Component
18 Outputting Dynamic Values
19 Reusing Components
20 Passing Data to Components with Props
21 CSS Styling & CSS Modules
22 Exercise & Another Component
23 Preparing the App For State Management
24 Adding Event Listeners
25 Working with State
26 Lifting State Up
27 The Special children Prop
28 State & Conditional Content
29 Adding a Shared Header & More State Management
30 Adding Form Buttons
31 Handling Form Submission
32 Updating State Based On Previous State
33 Outputting List Data
34 Adding a Backend to the React SPA
35 Sending a POST HTTP Request
36 Handling Side Effects with useEffect()
37 Handle Loading State
38 Understanding & Adding Routing
39 Adding Routes
40 Working with Layout Routes
41 Refactoring Route Components & More Nesting
42 Linking & Navigating
43 Data Fetching via loader()s
44 Submitting Data with action()s
45 Dynamic Routes
46 Module Summary
47 IMPORTANT — LEGACY CONTENT BELOW
48 Module Introduction
49 What is ReactJS
50 Why ReactJS & A First Demo
51 Building Single-Page Applications (SPAs)
52 React Alternatives
53 Creating a New React Project
54 Setting Up A Code Editor
55 React 18
56 Diving Into The Created Project
57 How React Works & Understanding Components
58 More Component Work & Styling With CSS Classes
59 Building & Re-using Components
60 Passing Data With Props & Dynamic Content
61 Handling Events
62 Adding More Components
63 Introducing State
64 Working with Event Props
65 Use The Right React Router Version
66 Adding Routing
67 Adding Links & Navigation
68 Scoping Component Styles With CSS Modules
69 Outputting Lists Of Data & Components
70 Adding Even More Components
71 Creating Wrapper Components
72 Working With Forms
73 Getting User Input & Handling Form Submission
74 Preparing The App For Http Requests & Adding a Backend
75 Sending a POST Http Request
76 Navigating Programmatically
77 Getting Started with Fetching Data
78 Using the useEffect Hook
79 Introducing React Context
80 Updating State Based On Previous State
81 Using Context In Components
82 More Context Usage
83 Module Summary
84 Module Resources
NextJS Essentials (App Router)
85 Module Introduction
86 Starting Setup
87 Understanding File-based Routing & React Server Components
88 Adding Another Route via the File System
89 Navigating Between Pages – Wrong & Right Solution
90 Working with Pages & Layouts
91 Reserved File Names, Custom Components & How To Organize A NextJS Project
92 Reserved Filenames
93 Configuring Dynamic Routes & Using Route Parameters
94 Onwards to the Main Project The Foodies App
95 Exercise Your Task
96 Exercise Solution
97 Revisiting The Concept Of Layouts
98 Adding a Custom Component To A Layout
99 Styling NextJS Project Your Options & Using CSS Modules
100 Optimizing Images with the NextJS Image Component
101 Using More Custom Components
102 Populating The Starting Page Content
103 Preparing an Image Slideshow
104 React Server Components vs Client Components – When To Use What
105 Using Client Components Efficiently
106 Outputting Meals Data & Images With Unknown Dimensions
107 Setting Up A SQLite Database
108 Fetching Data By Leveraging NextJS & Fullstack Capabilities
109 Adding A Loading Page
110 Using Suspense & Streamed Responses For Granular Loading State Management
111 Handling Errors
112 Handling Not Found States
113 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
114 Throwing Not Found Errors For Individual Meals
115 Getting Started with the Share Meal Form
116 Getting Started with a Custom Image Picker Input Component
117 Adding an Image Preview to the Picker
118 Improving the Image Picker Component
119 Introducing & Using Server Actions for Handling Form Submissions
120 Storing Server Actions in Separate Files
121 Creating a Slug & Sanitizing User Input for XSS Protection
122 Storing Uploaded Images & Storing Data in the Database
123 Managing the Form Submission Status with useFormStatus
124 Adding Server-Side Input Validation
125 Working with Server Action Responses & useFormState
126 Building For Production & Understanding NextJS Caching
127 Triggering Cache Revalidations
128 Don’t Store Files Locally On The Filesystem!
129 Bonus Storing Uploaded Images In The Cloud (AWS S3)
130 Adding Static Metadata
131 Adding Dynamic Metadata
132 Module Summary
Routing & Page Rendering – Deep Dive
133 Module Introduction
134 Project Setup, Overview & An Exercise!
135 Exercise Solution – Part 1
136 Exercise Solution – Part 2
137 App Styling & Using Dummy Data
138 Handling Not Found Errors & Showing Not Found Pages
139 Setting Up & Using Parallel Routes
140 Working with Parallel Routes & Nested Routes
141 Configuring Catch-All Routes
142 Catch-All Fallback Routes & Dealing With Multiple Path Segments
143 Throwing (Route-related) Errors
144 Handling Errors With Error Pages
145 Server vs Client Components
146 Nested Routes Inside Dynamic Routes
147 Intercepting Navigation & Using Interception Routes
148 Combining Parallel & Intercepting Routes
149 Navigating Programmatically
150 Using & Understanding Route Groups
151 Building APIs with Route Handlers
152 Using Middleware
153 Module Summary
Data Fetching – Deep Dive
154 Module Introduction
155 Adding a Backend
156 Option 1 Client-side Data Fetching
157 Option 2 Server-side Data Fetching
158 Why Use A Separate Backend Fetching Directly From The Source!
159 Showing a Loading Fallback
160 Migrating An Entire Application To A Local Data Source (Database)
161 Granular Data Fetching With Suspense
Mutating Data – Deep Dive
162 Module Introduction
163 Starting Project & Analyzing Mutation Options
164 Setting Up A Form Action
165 Creating a Server Action
166 Storing Data in Databases
167 Providing User Feedback with The useFormStatus Hook
168 Validating User Input With Help Of The useFormState Hook
169 Adjusting Server Actions for useFormState
170 Storing Server Actions In Separate Files
171 use server Does Not Guarantee Server-side Execution!
172 Preparing the App For Cloudinary Image Upload & Serving
173 Uploading & Storing Images
174 Alternative Ways of Using, Configuring & Triggering Server Actions
175 Revalidating Data To Avoid Caching Problems
176 Performing Optimistic Updates With NextJS
177 Caching Differences Development vs Production
Understanding & Configuring Caching
178 Module Introduction
179 Making Sense of NextJS’ Caching Types
180 Project Setup
181 Handling Request Memoization
182 Understanding The Data Cache & Cache Settings
183 Controlling Data Caching
184 Making Sense Of The Full Route Cache
185 On-Demand Cache Invalidation with revalidatePath & revalidateTag
186 Setting Up Request Memoization For Custom Data Sources
187 Setting Up Data Caching For Custom Data Sources
188 Invalidating Custom Data Source Data
189 Module Summary
NextJS App Optimizations
190 Module Introduction
191 Using the NextJS Image Component
192 Understanding the NextJS Image Component
193 Controlling the Image Size
194 Working with Priority Images & More Settings
195 Loading Unknown Images
196 Configuring CSS For Images With The fill Prop
197 Using An Image Loader & Cloudinary Resizing
198 Page Metadata – An Introduction
199 Configuring Static Page Metadata
200 Configuring Dynamic Page Metadata
201 Understanding Layout Metadata
User Authentication
202 Module Introduction
203 Project Setup
204 User Signup Extracting & Validating User Input
205 Storing Users in a Database – The Wrong Way
206 Hashing Passwords & Storing User Data The Right Way
207 Checking for Email Duplication
208 Theory How Does User Authentication Work
209 Choosing a Third-Party Auth Package (Lucia)
210 Creating a New Lucia Auth Instance
211 Configuring A Session & A Session Cookie
212 Setting Up An Auth Session
213 Verifying An Active Auth Session
214 Protecting Routes Against Unauthenticated Access
215 Switching Auth Modes With Query Parameters (Search Params)
216 Adding User Login (via a Server Action)
217 Triggering Different Server Actions via Query Parameters
218 Adding an Auth-only Layout
219 One Root Layout vs Multiple Root Layouts
220 Adding User Logout
Roundup & Next Steps
221 Course Roundup
222 But There’s More NextJS Content!
Pages & File-based Routing
223 From App Router To Pages Router
224 Using The Code Snapshots
225 Module Introduction
226 Our Starting Setup
227 What Is File-based Routing And Why Is It Helpful
228 Adding A First Page
229 Adding a Named Static Route File
230 Working with Nested Paths & Routes
231 Adding Dynamic Paths & Routes
232 Extracting Dynamic Path Segment Data (Dynamic Routes)
233 Building Nested Dynamic Routes & Paths
234 Adding Catch-All Routes
235 Navigating with the Link Component
236 Navigating To Dynamic Routes
237 A Different Way Of Setting Link Hrefs
238 Navigating Programmatically
239 Adding a Custom 404 Page
240 Module Summary
241 Module Resources
Project Time Working with File-based Routing
242 Module Introduction
243 Planning The Project
244 Setting Up The Main Pages
245 Adding Dummy Data & Static Files
246 Adding Regular React Components
247 Adding More React Components & Connecting Components
248 Styling Components In Next.js Projects
249 Link & NextJS 13
250 Adding Buttons & Icons
251 Adding the Event Detail Page (Dynamic Route)
252 Adding a General Layout Wrapper Component
253 Working on the All Events Page
254 Adding a Filter Form for Filtering Events
255 Navigating to the Filtered Events Page Progammatically
256 Extracting Data on the Catch-All Page
257 Final Steps
258 Module Summary
259 Module Resources
Page Pre-Rendering & Data Fetching
260 Module Introduction
261 The Problem With Traditional React Apps (and Data Fetching)
262 How NextJS Prepares & Pre-renders Pages
263 Introducing Static Generation with getStaticProps
264 NextJS Pre-renders By Default!
265 Adding getStaticProps To Pages
266 Running Server-side Code & Using the Filesystem
267 A Look Behind The Scenes
268 Utilizing Incremental Static Generation (ISR)
269 ISR A Look Behind The Scenes
270 A Closer Look At getStaticProps & Configuration Options
271 Working With Dynamic Parameters
272 Introducing getStaticPaths For Dynamic Pages
273 Using getStaticPaths
274 getStaticPaths & Link Prefetching Behind The Scenes
275 Working With Fallback Pages
276 Loading Paths Dynamically
277 Fallback Pages & Not Found Pages
278 Introducing getServerSideProps for Server-side Rendering (SSR)
279 Using getServerSideProps for Server-side Rendering
280 getServerSideProps and its Context
281 Dynamic Pages & getServerSideProps
282 getServerSideProps Behind The Scenes
283 Introducing Client-Side Data Fetching (And When To Use It)
284 Implementing Client-Side Data Fetching
285 A Note About useSWR
286 Using the useSWR NextJS Hook
287 Combining Pre-Fetching With Client-Side Fetching
288 Module Summary
289 Module Resources
Project Time Page Pre-rendering & Data Fetching
290 Module Introduction
291 Preparations
292 Adding Static Site Generation (SSG) On The Home Page
293 Loading Data & Paths For Dynamic Pages
294 Optimizing Data Fetching
295 Working on the All Events Page
296 Using Server-side Rendering (SSR)
297 Adding Client-Side Data Fetching
298 Module Summary
299 Module Resources
Optimizing NextJS Apps
300 Module Introduction
301 Analyzing the Need for head Metadata
302 Configuring the head Content
303 Adding Dynamic head Content
304 Reusing Logic Inside A Component
305 Working with the _app.js File (and Why)
306 Merging head Content
307 The _document.js File (And What It Does)
308 A Closer Look At Our Images
309 Optimizing Images with the Next Image Component & Feature
310 Taking A Look At The Next Image Documentation
311 Module Summary
312 Module Resources
Adding Backend Code with API Routes (Fullstack React)
313 Module Introduction
314 What are API Routes
315 Writing Our First API Route
316 Preparing the Frontend Form
317 Parsing The Incoming Request & Executing Server-side Code
318 Sending Requests To API Routes
319 Using API Routes To Get Data
320 Using API Routes For Pre-Rendering Pages
321 Creating & Using Dynamic API Routes
322 Exploring Different Ways Of Structuring API Route Files
323 Module Summary
324 Module Resources
Project Time API Routes
325 Module Introduction
326 Starting Setup & A Challenge For You!
327 Adding a Newsletter Route
328 Adding Comments API Routes
329 Connecting the Frontend To the Comments API Routes
330 Setting Up A MongoDB Database
331 Running MongoDB Queries From Inside API Routes
332 Inserting Comments Into The Database
333 Getting Data From The Database
334 Adding Error Handling
335 More Error Handling
336 A Final Note On MongoDB Connections
337 Module Summary
338 Improvement Getting Comments For A Specific Event
339 Module Resources
Working with App-wide State (React Context)
340 Module Introduction
341 Our Target State & Starting Project
342 Creating a New React Context
343 Adding Context State
344 Using Context Data In Components
345 Example Triggering & Showing Notifications
346 Example Removing Notifications (Automatically)
347 Challenge Solution
348 Module Summary
349 Module Resources
Complete App Example Build a Full Blog A to Z
350 Module Introduction
351 Setting Up The Core Pages
352 Getting Started With The Home Page
353 Adding The Hero Component
354 Adding Layout & Navigation
355 Time To Add Styling & A Logo
356 Starting Work On The Featured Posts Part
357 Adding A Post Grid & Post Items
358 Rendering Dummy Post Data
359 Adding the All Posts Page
360 Working On The Post Detail Page
361 Rendering Markdown As JSX
362 Adding Markdown Files As A Data Source
363 Adding Functions To Read & Fetch Data From Markdown Files
364 Using Markdown Data For Rendering Posts
365 Rendering Dynamic Post Pages & Paths
366 Rendering Custom HTML Elements with React Markdown
367 Rendering Images With The Next Image Component (From Markdown)
368 Rendering Code Snippets From Markdown
369 Preparing The Contact Form
370 Adding The Contact API Route
371 Sending Data From The Client To The API Route
372 Storing Messages With MongoDB In A Database
373 Adding UI Feedback With Notifications
374 Adding head Data
375 Adding A _document.js File
376 Using React Portals
377 Module Summary
378 Module Resources
Deploying NextJS Apps
379 Module Introduction
380 Building NextJS Apps Your Options
381 Key Deployment Steps
382 Checking & Optimizing Our Code
383 The NextJS Config File & Working With Environment Variables
384 Running a Test Build & Reducing Code Size
385 A Full Deployment Example (To Vercel)
386 A Note On Github & Secret Credentials
387 Using the export Feature
388 Module Summary
389 Module Resources
Adding Authentication
390 Module Introduction
391 Our Starting Project
392 How Does Authentication Work (In React & NextJS Apps)
393 Must Read Install the Right next-auth Version
394 Using The next-auth Library
395 Adding A User Signup API Route
396 Sending Signup Requests From The Frontend
397 Improving Signup With Unique Email Addresses
398 Adding the Credentials Auth Provider & User Login Logic
399 Sending a Signin Request From The Frontend
400 Managing Active Session (On The Frontend)
401 Adding User Logout
402 Adding Client-Side Page Guards (Route Protection)
403 Adding Server-Side Page Guards (And When To Use Which Approach)
404 Protecting the Auth Page
405 Using the next-auth Session Provider Component
406 Analyzing Further Authentication Requirements
407 Protecting API Routes
408 Adding the Change Password Logic
409 Sending a Change Password Request From The Frontend
410 Module Summary & Final Steps
411 Module Resources
Optional NextJS Summary
412 Module Introduction
413 What is NextJS
414 Key Feature Server-side (Pre-) Rendering of Pages
415 Key Feature File-based Routing
416 Key Feature Build Fullstack Apps With Ease
417 Creating a NextJS Project & IDE Setup
418 About the App Router
419 Analyzing the Created Project
420 Adding First Pages To The Project
421 Adding Nested Pages Paths
422 Creating Dynamic Pages
423 Extracting Dynamic Route Data
424 Linking Between Pages
425 Onwards To A Bigger Project!
426 Preparing Our Project Pages
427 Rendering A List Of (Dummy) Meetups
428 Adding A Form For Adding Meetups
429 The _app.js File & Wrapper Components
430 Programmatic Navigation
431 Adding Custom Components & Styling With CSS Modules
432 How NextJS Page Pre-Rendering Actually Works
433 Introducing Data Fetching For Page Generation (getStaticProps)
434 More Static Site Generation (SSG) With getStaticProps
435 Exploring getServerSideProps
436 Working With Dynamic Path Params In getStaticProps
437 Dynamic Pages & getStaticProps & getStaticPaths
438 Introducing API Routes
439 Connecting & Querying a MongoDB Database
440 Sending HTTP Requests To API Routes
441 Getting Data From The Database (For Page Pre-Rendering)
442 Getting Meetup Detail Data & Paths
443 Adding head Metadata To Pages
444 Deploying NextJS Projects
445 Working With Fallback Pages & Re-Deploying
446 Module Summary
447 Module Resources
Course Roundup
448 Course Roundup
449 Bonus!
Resolve the captcha to access the links!