Next.js 14 & React - The Complete Guide

36h 13m 15s
English
Paid

Course description

I created the bestselling Udemy course on React, now I'm super excited to share this course on 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!

Read more about the course

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 which allows 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 that summary module (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

  • 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

  • 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!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 383 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Next.js 14 & React - The Complete Guide

0:00
/
#1: Welcome To The Course!

All Course Lessons (383)

#Lesson TitleDurationAccess
1
Welcome To The Course! Demo
01:21
2
What Is NextJS? Why Would You Use It?
02:21
3
Key Features & Benefits Of NextJS
02:41
4
Creating a First NextJS App
04:26
5
NextJS vs "Just React" - Analyzing The NextJS Project
02:31
6
Editing The First App
02:22
7
Pages Router vs App Router - One Framework, Two Approaches
02:30
8
How To Get The Most Out Of This Course
03:06
9
Module Introduction
01:09
10
What Is React & Why Would You Use It?
05:38
11
React Projects - Requirements
02:10
12
Creating React Projects
03:28
13
Our Starting Project
03:29
14
Understanding How React Works
07:47
15
Building A First Custom Component
11:16
16
Outputting Dynamic Values
05:04
17
Reusing Components
06:01
18
Passing Data to Components with Props
06:16
19
CSS Styling & CSS Modules
10:08
20
Exercise & Another Component
06:32
21
Preparing the App For State Management
03:47
22
Adding Event Listeners
07:53
23
Working with State
10:01
24
Lifting State Up
09:09
25
The Special "children" Prop
07:22
26
State & Conditional Content
09:00
27
Adding a Shared Header & More State Management
07:52
28
Adding Form Buttons
03:35
29
Handling Form Submission
06:19
30
Updating State Based On Previous State
05:31
31
Outputting List Data
06:40
32
Adding a Backend to the React SPA
06:11
33
Sending a POST HTTP Request
04:13
34
Handling Side Effects with useEffect()
09:07
35
Handle Loading State
04:24
36
Understanding & Adding Routing
03:56
37
Adding Routes
05:37
38
Working with Layout Routes
04:09
39
Refactoring Route Components & More Nesting
05:36
40
Linking & Navigating
08:10
41
Data Fetching via loader()s
09:08
42
Submitting Data with action()s
11:09
43
Dynamic Routes
08:42
44
Module Summary
01:26
45
Module Introduction
01:21
46
Starting Setup
02:33
47
Understanding File-based Routing & React Server Components
02:46
48
Adding Another Route via the File System
03:07
49
Navigating Between Pages - Wrong & Right Solution
04:13
50
Working with Pages & Layouts
03:23
51
Reserved File Names, Custom Components & How To Organize A NextJS Project
06:32
52
Configuring Dynamic Routes & Using Route Parameters
06:18
53
Onwards to the Main Project: The Foodies App
01:25
54
Exercise: Your Task
02:04
55
Exercise: Solution
08:20
56
Revisiting The Concept Of Layouts
03:51
57
Adding a Custom Component To A Layout
05:59
58
Styling NextJS Project: Your Options & Using CSS Modules
06:01
59
Optimizing Images with the NextJS Image Component
04:58
60
Using More Custom Components
03:49
61
Populating The Starting Page Content
04:19
62
Preparing an Image Slideshow
03:26
63
React Server Components vs Client Components - When To Use What
08:16
64
Using Client Components Efficiently
11:08
65
Outputting Meals Data & Images With Unknown Dimensions
10:32
66
Setting Up A SQLite Database
03:12
67
Fetching Data By Leveraging NextJS & Fullstack Capabilities
07:18
68
Adding A Loading Page
04:01
69
Using Suspense & Streamed Responses For Granular Loading State Management
05:55
70
Handling Errors
05:23
71
Handling "Not Found" States
01:58
72
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
11:05
73
Throwing Not Found Errors For Individual Meals
02:04
74
Getting Started with the "Share Meal" Form
01:54
75
Adding an Image Preview to the Picker
06:01
76
Getting Started with a Custom Image Picker Input Component
08:29
77
Introducing & Using Server Actions for Handling Form Submissions
09:03
78
Storing Server Actions in Separate Files
03:46
79
Creating a Slug & Sanitizing User Input for XSS Protection
03:21
80
Storing Uploaded Images & Storing Data in the Database
12:57
81
Managing the Form Submission Status with useFormStatus
05:31
82
Adding Server-Side Input Validation
05:55
83
Working with Server Action Responses & useFormState
08:06
84
Building For Production & Understanding NextJS Caching
06:07
85
Triggering Cache Revalidations
03:58
86
Don't Store Files Locally On The Filesystem!
02:14
87
Adding Static Metadata
03:48
88
Adding Dynamic Metadata
02:21
89
Module Summary
04:26
90
Module Introduction
01:38
91
Project Setup, Overview & An Exercise!
04:18
92
Exercise Solution - Part 1
07:18
93
Exercise Solution - Part 2
04:57
94
App Styling & Using Dummy Data
09:00
95
Handling "Not Found" Errors & Showing "Not Found" Pages
04:40
96
Setting Up & Using Parallel Routes
06:41
97
Working with Parallel Routes & Nested Routes
12:51
98
Configuring Catch-All Routes
06:02
99
Catch-All Fallback Routes & Dealing With Multiple Path Segments
09:22
100
Throwing (Route-related) Errors
03:39
101
Handling Errors With Error Pages
03:03
102
Server vs Client Components
10:11
103
Nested Routes Inside Dynamic Routes
04:57
104
Intercepting Navigation & Using Interception Routes
05:12
105
Combining Parallel & Intercepting Routes
07:43
106
Navigating Programmatically
02:43
107
Using & Understanding Route Groups
06:40
108
Building APIs with Route Handlers
05:16
109
Using Middleware
05:41
110
Module Summary
00:31
111
Module Introduction
00:57
112
Adding a Backend
02:47
113
Option 1: Client-side Data Fetching
08:51
114
Option 2: Server-side Data Fetching
05:37
115
Why Use A Separate Backend? Fetching Directly From The Source!
06:15
116
Showing a "Loading" Fallback
04:51
117
Migrating An Entire Application To A Local Data Source (Database)
13:20
118
Granular Data Fetching With Suspense
11:36
119
Module Introduction
01:12
120
Starting Project & Analyzing Mutation Options
05:47
121
Setting Up A Form Action
09:20
122
Creating a Server Action
04:17
123
Storing Data in Databases
04:40
124
Providing User Feedback with The useFormStatus Hook
06:05
125
Validating User Input With Help Of The useFormState Hook
09:58
126
Adjusting Server Actions for useFormState
07:41
127
Storing Server Actions In Separate Files
03:58
128
Uploading & Storing Images
08:14
129
Alternative Ways of Using, Configuring & Triggering Server Actions
11:01
130
Revalidating Data To Avoid Caching Problems
04:46
131
Performing Optimistic Updates With NextJS
11:43
132
Caching Differences: Development vs Production
06:14
133
Module Introduction
01:10
134
Making Sense of NextJS' Caching Types
05:14
135
Project Setup
01:46
136
Handling Request Memoization
05:32
137
Understanding The Data Cache & Cache Settings
05:50
138
Controlling Data Caching
05:28
139
Making Sense Of The Full Route Cache
04:43
140
On-Demand Cache Invalidation with revalidatePath & revalidateTag
06:04
141
Setting Up Request Memoization For Custom Data Sources
07:16
142
Setting Up Data Caching For Custom Data Sources
03:45
143
Invalidating Custom Data Source Data
03:33
144
Module Summary
01:45
145
Module Introduction
03:09
146
Using the NextJS Image Component
03:44
147
Understanding the NextJS Image Component
05:16
148
Controlling the Image Size
04:46
149
Working with Priority Images & More Settings
03:04
150
Loading Unknown Images
04:13
151
Configuring CSS For Images With The "fill" Prop
03:04
152
Using An Image Loader & Cloudinary Resizing
15:52
153
Page Metadata - An Introduction
01:05
154
Configuring Static Page Metadata
02:58
155
Configuring Dynamic Page Metadata
05:04
156
Understanding Layout Metadata
01:39
157
Module Introduction
01:05
158
Project Setup
03:27
159
User Signup: Extracting & Validating User Input
14:36
160
Storing Users in a Database - The Wrong Way
04:31
161
Hashing Passwords & Storing User Data The Right Way
02:08
162
Checking for Email Duplication
05:02
163
Theory: How Does User Authentication Work?
05:22
164
Choosing a Third-Party Auth Package (Lucia)
02:55
165
Creating a New Lucia Auth Instance
04:33
166
Configuring A Session & A Session Cookie
04:52
167
Setting Up An Auth Session
03:44
168
Verifying An Active Auth Session
07:16
169
Protecting Routes Against Unauthenticated Access
03:08
170
Switching Auth Modes With Query Parameters (Search Params)
05:36
171
Adding User Login (via a Server Action)
05:35
172
Triggering Different Server Actions via Query Parameters
03:45
173
Adding an Auth-only Layout
03:42
174
Adding User Logout
04:11
175
Course Roundup
01:50
176
But There's More NextJS Content!
03:11
177
From App Router To Pages Router
01:39
178
Module Introduction
01:13
179
Our Starting Setup
01:20
180
What Is "File-based Routing"? And Why Is It Helpful?
05:23
181
Adding A First Page
04:02
182
Adding a Named / Static Route File
01:35
183
Working with Nested Paths & Routes
03:34
184
Adding Dynamic Paths & Routes
04:55
185
Extracting Dynamic Path Segment Data (Dynamic Routes)
04:55
186
Building Nested Dynamic Routes & Paths
07:13
187
Adding Catch-All Routes
05:45
188
Navigating with the "Link" Component
05:45
189
Navigating To Dynamic Routes
03:42
190
A Different Way Of Setting Link Hrefs
02:56
191
Navigating Programmatically
03:51
192
Adding a Custom 404 Page
01:36
193
Module Summary
05:52
194
Module Introduction
02:05
195
Planning The Project
04:16
196
Setting Up The Main Pages
07:36
197
Adding Dummy Data & Static Files
04:47
198
Adding Regular React Components
07:15
199
Adding More React Components & Connecting Components
10:23
200
Styling Components In Next.js Projects
09:29
201
Adding Buttons & Icons
08:27
202
Adding the "Event Detail" Page (Dynamic Route)
08:32
203
Adding a General Layout Wrapper Component
06:28
204
Working on the "All Events" Page
02:06
205
Adding a Filter Form for Filtering Events
08:26
206
Navigating to the "Filtered Events" Page Progammatically
08:26
207
Extracting Data on the Catch-All Page
08:55
208
Final Steps
07:03
209
Module Summary
01:41
210
Module Introduction
02:26
211
The Problem With Traditional React Apps (and Data Fetching)
05:16
212
How NextJS Prepares & Pre-renders Pages
05:39
213
Introducing Static Generation with "getStaticProps"
04:05
214
NextJS Pre-renders By Default!
03:09
215
Adding "getStaticProps" To Pages
06:40
216
Running Server-side Code & Using the Filesystem
07:42
217
A Look Behind The Scenes
05:21
218
Utilizing Incremental Static Generation (ISR)
07:23
219
ISR: A Look Behind The Scenes
03:46
220
A Closer Look At "getStaticProps" & Configuration Options
04:20
221
Working With Dynamic Parameters
09:47
222
Introducing "getStaticPaths" For Dynamic Pages
03:45
223
Using "getStaticPaths"
03:27
224
"getStaticPaths" & Link Prefetching: Behind The Scenes
04:00
225
Working With Fallback Pages
05:28
226
Loading Paths Dynamically
04:03
227
Fallback Pages & "Not Found" Pages
05:54
228
Introducing "getServerSideProps" for Server-side Rendering (SSR)
04:14
229
Using "getServerSideProps" for Server-side Rendering
04:06
230
"getServerSideProps" and its Context
04:21
231
Dynamic Pages & "getServerSideProps"
04:05
232
"getServerSideProps": Behind The Scenes
03:26
233
Introducing Client-Side Data Fetching (And When To Use It)
03:41
234
Implementing Client-Side Data Fetching
14:48
235
Using the "useSWR" NextJS Hook
08:59
236
Combining Pre-Fetching With Client-Side Fetching
08:56
237
Module Summary
06:46
238
Module Introduction
01:05
239
Preparations
05:02
240
Adding Static Site Generation (SSG) On The Home Page
11:03
241
Loading Data & Paths For Dynamic Pages
09:51
242
Optimizing Data Fetching
07:48
243
Working on the "All Events" Page
02:48
244
Using Server-side Rendering (SSR)
09:53
245
Adding Client-Side Data Fetching
10:56
246
Module Summary
01:31
247
Module Summary
01:20
248
Analyzing the Need for "head" Metadata
01:50
249
Configuring the "head" Content
03:42
250
Adding Dynamic "head"
05:18
251
Reusing Logic Inside A Component
04:23
252
Working with the "_app.js" File (and Why)
03:04
253
Merging "head" Content
03:18
254
The "_document.js" File (And What It Does)
05:32
255
A Closer Look At Our Images
02:00
256
Optimizing Images with the "Next Image" Component & Feature
08:38
257
Taking A Look At The "Next Image" Documentation
00:52
258
Module Summary
01:17
259
Module Introduction
00:51
260
What are "API Routes"?
05:38
261
Writing Our First API Route
08:25
262
Preparing the Frontend Form
06:30
263
Parsing The Incoming Request & Executing Server-side Code
10:17
264
Sending Requests To API Routes
05:44
265
Using API Routes To Get Data
07:57
266
Using API Routes For Pre-Rendering Pages
08:05
267
Creating & Using Dynamic API Routes
13:42
268
Exploring Different Ways Of Structuring API Route Files
05:10
269
Module Summary
01:45
270
Module Introduction
01:32
271
Starting Setup & A Challenge For You!
05:16
272
Adding a Newsletter Route
11:11
273
Adding Comments API Routes
08:44
274
Connecting the Frontend To the Comments API Routes
11:00
275
Setting Up A MongoDB Database
05:43
276
Running MongoDB Queries From Inside API Routes
09:15
277
Inserting Comments Into The Database
06:27
278
Getting Data From The Database
04:32
279
Adding Error Handling
07:34
280
More Error Handling
10:48
281
Module Summary
01:46
282
Module Introduction
01:28
283
Our Target State & Starting Project
04:33
284
Creating a New React Context
05:38
285
Adding Context State
03:50
286
Using Context Data In Components
04:38
287
Example: Triggering & Showing Notifications
06:36
288
Example: Removing Notifications (Automatically)
06:32
289
Challenge Solution
07:23
290
Module Summary
01:10
291
Module Introduction
03:00
292
Setting Up The Core Pages
05:11
293
Getting Started With The Home Page
05:30
294
Adding The "Hero" Component
08:48
295
Adding Layout & Navigation
08:46
296
Time To Add Styling & A Logo
03:19
297
Starting Work On The "Featured Posts" Part
05:48
298
Adding A Post Grid & Post Items
09:42
299
Rendering Dummy Post Data
12:26
300
Adding the "All Posts" Page
04:00
301
Working On The "Post Detail" Page
10:11
302
Rendering Markdown As JSX
02:31
303
Adding Markdown Files As A Data Source
07:33
304
Adding Functions To Read & Fetch Data From Markdown Files
13:41
305
Using Markdown Data For Rendering Posts
08:20
306
Rendering Dynamic Post Pages & Paths
11:43
307
Rendering Images With The "Next Image" Component (From Markdown)
12:47
308
Rendering Code Snippets From Markdown
06:30
309
Preparing The Contact Form
04:19
310
Adding The Contact API Route
04:27
311
Sending Data From The Client To The API Route
07:27
312
Storing Messages With MongoDB In A Database
08:53
313
Adding UI Feedback With Notifications
15:06
314
Adding "head" Data
06:53
315
Adding A "_document.js" File
02:56
316
Using React Portals
03:46
317
Module Summary
01:25
318
Module Introduction
01:18
319
Building NextJS Apps: Your Options
08:06
320
Key Deployment Steps
03:07
321
Checking & Optimizing Our Code
03:12
322
The NextJS Config File & Working With Environment Variables
14:26
323
Running a Test Build & Reducing Code Size
07:22
324
A Full Deployment Example (To Vercel)
17:41
325
A Note On Github & Secret Credentials
01:58
326
Using the "export" Feature
02:17
327
Module Summary
00:39
328
Module Introduction
01:17
329
Our Starting Project
01:46
330
How Does Authentication Work (In React & NextJS Apps)?
14:24
331
Using The "next-auth" Library
03:05
332
Adding A User Signup API Route
13:00
333
Sending Signup Requests From The Frontend
09:42
334
Improving Signup With Unique Email Addresses
03:01
335
Adding the "Credentials Auth Provider" & User Login Logic
14:09
336
Sending a "Signin" Request From The Frontend
06:53
337
Managing Active Session (On The Frontend)
05:58
338
Adding User Logout
02:19
339
Adding Client-Side Page Guards (Route Protection)
07:51
340
Adding Server-Side Page Guards (And When To Use Which Approach)
07:42
341
Protecting the "Auth" Page
05:47
342
Using the "next-auth" Session Provider Component
05:15
343
Analyzing Further Authentication Requirements
03:43
344
Protecting API Routes
06:38
345
Adding the "Change Password" Logic
10:37
346
Sending a "Change Password" Request From The Frontend
09:17
347
Module Summary & Final Steps
03:30
348
Module Introduction
03:04
349
What is NextJS?
04:46
350
Key Feature: Server-side (Pre-) Rendering of Pages
06:39
351
Key Feature: File-based Routing
03:14
352
Key Feature: Build Fullstack Apps With Ease
01:51
353
Creating a NextJS Project & IDE Setup
06:15
354
About the "App Router"
02:48
355
Analyzing the Created Project
02:53
356
Adding First Pages To The Project
06:06
357
Adding Nested Pages / Paths
03:48
358
Creating Dynamic Pages
03:37
359
Extracting Dynamic Route Data
04:08
360
Linking Between Pages
07:14
361
Onwards To A Bigger Project!
03:33
362
Preparing Our Project Pages
03:43
363
Rendering A List Of (Dummy) Meetups
05:04
364
Adding A Form For Adding Meetups
03:56
365
The "_app.js" File & Wrapper Components
06:18
366
Programmatic Navigation
03:48
367
Adding Custom Components & Styling With CSS Modules
10:01
368
How NextJS Page Pre-Rendering Actually Works
05:53
369
Introducing Data Fetching For Page Generation (getStaticProps)
08:57
370
More Static Site Generation (SSG) With getStaticProps
05:45
371
Exploring getServerSideProps
06:28
372
Working With Dynamic Path Params In getStaticProps
05:15
373
Dynamic Pages & getStaticProps & getStaticPaths
07:17
374
Introducing API Routes
06:21
375
Connecting & Querying a MongoDB Database
09:33
376
Sending HTTP Requests To API Routes
06:50
377
Getting Data From The Database (For Page Pre-Rendering)
07:11
378
Getting Meetup Detail Data & Paths
09:42
379
Adding "head" Metadata To Pages
09:20
380
Deploying NextJS Projects
12:27
381
Working With Fallback Pages & Re-Deploying
04:14
382
Module Summary
02:16
383
Course Roundup
03:58

Unlock unlimited learning

Get instant access to all 382 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify

Sources: fullstack.io
Learnify is a self-paced, online Masterclass, where you will master ASP.NET CORE and React by building a practical, real-world application from scratch.
20 hours 40 minutes 31 seconds
React Js A-Z With Laravel - For Beginner to Advanced Level

React Js A-Z With Laravel - For Beginner to Advanced Level

Sources: udemy
This React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W
68 hours 1 minute 33 seconds
Build a Jira clone

Build a Jira clone

Sources: Code With Antonio
In this 16-hour course, consisting of two parts (by the way, this is my longest course!), you will learn how to create a fully functional Jira clone with a...
16 hours 26 minutes 4 seconds
Microservices with NodeJS, React, Typescript and Kubernetes

Microservices with NodeJS, React, Typescript and Kubernetes

Sources: udemy
In building large scale applications intended for growth, microservices architecture is the go-to solution. One issue for Javascript and NodeJS learners is the
95 hours 13 minutes 4 seconds
React Summit Remote Edition 2021

React Summit Remote Edition 2021

Sources: reactsummit.com
Attend a three-day React conference gathering thousands of international Front-end and Full-stack engineers in the cloud.
16 hours 1 minute 10 seconds