Next.js 14 & React - The Complete Guide

36h 13m 15s
English
Paid
April 23, 2024

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!

More

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 Next.js 14 & React - The Complete Guide

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course! 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

Similar courses to Next.js 14 & React - The Complete Guide

Testing Next.js Apps with Jest, Testing Library and Cypress
The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & Moreudemy

Duration 83 hours 56 minutes 37 seconds
React Router v4

React Router v4ui.dev (ex. Tyler McGinnis)

Duration 6 hours 44 minutes 1 second
React with TypeScript
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQLudemy

Duration 4 hours 32 minutes 39 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass
Django with React | An Ecommerce Website

Django with React | An Ecommerce WebsiteBrad Traversy

Duration 18 hours 6 minutes 7 seconds
Complete Next.js Developer in 2023: Zero to Mastery