Next.js 14 & React - The Complete Guide

36h 13m 15s
English
Paid

I created the bestselling Udemy course on React, and now I'm excited to share this comprehensive course on Next.js with you. This in-depth guide covers an amazing React framework that allows you to advance as a React developer and build production-ready projects with Next.js and React. Next.js is a fullstack-capable, production-ready framework for ReactJS, one of today's most popular JavaScript libraries!

Why Choose Next.js?

Feeling overwhelmed by buzzwords? That's understandable, but Next.js truly is a great choice for advancing your React developer skills and enhancing your React applications!

Next.js is rapidly growing and in high demand. It offers built-in server-side rendering and page pre-rendering, making it easier than ever to create user-friendly and SEO-optimized React apps.

Additionally, it simplifies building fullstack React apps by combining frontend and backend code in one project. You can seamlessly integrate client-side and server-side code and build a Node.js-based API right alongside your frontend React apps. Next.js makes this process straightforward!

Need authentication? Next.js streamlines user signup, sign-in, and session management, adding another layer of convenience.

Course Overview

This course will take you from a Next.js beginner to an advanced level rapidly!

We'll start with the basics, so no prior Next.js knowledge is needed. We'll then delve into all core features through multiple real projects that apply concepts step by step. A basic understanding of React is required, but the course includes a "React refresher" module if you're a bit rusty.

You'll also receive a "Next.js Summary" module, allowing you to revisit core concepts without going through the entire course again. It’s perfect for a quick overview of Next.js's main features.

After completing this course, you will be well-equipped to build your own Next.js projects from scratch and be ready to pursue opportunities for Next.js roles!

Course Content

This course covers:

  • Understanding Next.js and its advantages
  • Why React alone may not suffice in some cases
  • Starting from scratch to create and understand Next.js projects
  • File-based routing and dynamic routes
  • Page pre-rendering and server-side rendering
  • Fetching data to enhance your applications
  • Pre-generating dynamic and static pages
  • Optimizing pages with metadata
  • Using the Next.js Image component for image optimization
  • Developing fullstack applications with API routes
  • State management using React context within Next.js apps
  • Implementing authentication in Next.js apps
  • Creating multiple complete apps to reinforce core concepts
  • In-depth React.js refresher module
  • A go-to Next.js summary module for quick learning
  • ...and much more!

About the Authors

Academind Pro

Academind Pro thumbnail
Academind offers the most comprehensive and up-to-date learning resources on Web Development. From the very basics up to advanced topics and real projects - we got you covered! And we'll give you course completion certificates to prove your progress to others!

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 383 lessons

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