CF

Complete Next.js Developer in 2023: Zero to Mastery

27h 12m 37s
English
Paid

Complete Next.js Developer in 2023: Zero to Mastery is a 308-lesson 27 hours 12 minutes self-paced course by Zero To Mastery. Learn Next JS from industry experts using modern best practices.

Course facts

Lessons
308
Duration
27 hours 12 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Premium

Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level React applications from scratch & get hired as a Next.js Developer in 2023.

  • Build REAL enterprise-level NextJS applications and deploy to production
  • Learn the latest features and tools in the NextJS ecosystem including: SWR (React Hooks), Hasura, Serverless Functions, Vercel, Framer Motion + more
  • Using GraphQL as a NextJS Developer
  • Set up authentication and user accounts (including password-less login!)
  • Learn about SEO and how to use NextJS to have your applications rank on Google
  • Learn to lead Next JS projects by making good architecture decisions and helping others on your team
  • Learn to build reactive, performant, large-scale applications like a senior developer
  • Learn different rendering techniques: static site generation, server side rendering, incremental static regeneration, hydration, etc.
  • Become a top 10% NextJS Developer
  • Use Airtable (which is exploding in popularity) to build full-stack applications
  • Master the latest ecosystem of a NextJS Developer from scratch
  • Using the latest ES6 / ES7 / ES8 / ES9 / ES10 / ES2020 / ES2021 JavaScript to write clean code

Who teaches Complete Next.js Developer in 2023: Zero to Mastery? Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

What lessons are included in Complete Next.js Developer in 2023: Zero to Mastery?

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Complete Next.js Developer: Zero to Mastery
All Course Lessons (308)
#Lesson TitleDurationAccess
1
Complete Next.js Developer: Zero to Mastery Demo
02:33
2
Next.js Course Outline
05:31
3
The Two Paths: App Router vs. Pages Router
11:04
4
Which Path To Take?
05:08
5
Section Overview
02:08
6
What is Next.js?
01:53
7
Benefits of Next.js and Different Rendering Techniques
04:39
8
Performance with Next.js
06:27
9
Image Component in Next.js
04:14
10
File Based Routing and SEO
06:12
11
Serverless Functions in Next.js
04:36
12
Next.js vs Create React App
06:12
13
Project Overview: What Are We Building?
05:33
14
Create Next.js App Zero Config
08:58
15
Editor Setup VS Code
07:26
16
Next.js Setup Project Walkthrough - Part 1
09:32
17
Next.js Setup Project Walkthrough - Part 2
07:14
18
What Is Tailwind CSS?
08:27
19
Let's Get Ready for the Home Page!
04:17
20
App Background
05:36
21
Next.js Fonts Walkthrough
04:15
22
Next.js Google Fonts
06:11
23
Using Multiple Fonts
04:46
24
Using Local Fonts
05:41
25
Metadata API
04:11
26
What Are Server Components?
08:12
27
Why Do We Need Server Components?
03:01
28
When to Use Server vs. Client Components
03:39
29
Walkthrough of the Blog App Architecture
01:44
30
Code Walkthrough of the Blog App
04:19
31
Exercise: Server Components
04:25
32
Solution: Server Components
03:39
33
Exercise: Moving Client Components Down the Tree
07:07
34
Solution: Moving Client Components Down the Tree
01:56
35
Let’s Add Our Client Component Banner!
05:07
36
Introduction to Routing
07:07
37
Routing Terminology
03:04
38
Dynamic Routing
03:56
39
Dynamic Routing Example
02:22
40
Catch All Routes
03:21
41
Differences between Catch All and Dynamic Routes
02:40
42
Exercise: Routing
01:18
43
Link Component
02:37
44
Nested Routes Link
03:09
45
Dynamic Pages with Link Component
02:14
46
Exercise: Link Component Routing
01:00
47
What is SEO?
09:38
48
Client Rendering vs. Server Rendering
06:23
49
Pre-Rendering Hydration
04:10
50
Different Rendering Techniques
04:23
51
Static Site Generation (SSG)
05:39
52
Server-Side Rendering (SSR)
03:11
53
Incremental Site Regeneration (ISR)
04:26
54
Client-Side Rendering (CSR)
04:02
55
Code Walkthrough
03:29
56
Data Caching
03:58
57
Fetch API Twist in Next.js
04:32
58
Implement SSG
04:34
59
Implement ISR
03:45
60
Implement SSR
03:05
61
Project Architecture
05:47
62
Card Server or Client Component?
02:08
63
Build Card Component
06:22
64
Add Coffee Stores on Page
06:01
65
Image Component Blur
03:31
66
Mapbox API Setup
04:20
67
Environment Variables
02:50
68
generateStaticParams API
01:44
69
generateStaticParams
03:54
70
Mapbox Library
05:52
71
Transform Coffee Data
08:14
72
Data Fetching Walkthrough with Fetch
02:19
73
Unique ID
01:29
74
Transform Coffee Store Data
04:46
75
Unique ID
01:28
76
Coffee Store Page Styling
03:44
77
Generate Static Params
03:30
78
Setup Unsplash
03:11
79
Setup Unsplash API
02:44
80
Geolocation API
03:51
81
Server or Client Component Dilemma
01:53
82
Refactor Components
02:21
83
Implement Handle Track Location
05:29
84
Server Cannot Be Child Component
03:21
85
Loading in Geolocation
03:43
86
Find Lat Long
02:58
87
Error Handling
03:28
88
Stores Near Me
08:16
89
What Are Route Handlers?
04:59
90
Implement Route Handler
06:37
91
Call Route Handler
04:39
92
Dynamic Route Handler
03:25
93
Walkthrough of the Coffee Store Page
04:36
94
Best Spot to Invoke Store
01:27
95
Setup Airtable
06:09
96
Airtable API
02:57
97
Architecture Airtable
02:04
98
Find Record by ID
07:23
99
Refactor Code
05:16
100
Create Coffee Store
08:32
101
Upvote Design
03:13
102
Voting Count
03:06
103
Server Actions
03:21
104
Server Actions Walkthrough
06:15
105
Routing Server Actions
01:36
106
Exercise: Server Actions
01:28
107
Solution: Server Actions
04:12
108
Create Server Action in Content Security Policy (CSP)
02:30
109
Update Coffee Store
05:19
110
Pass ID
02:31
111
UseFormState
05:04
112
Loading States Server Action
07:03
113
Error Page
08:31
114
Loading Coffee Store Page
04:53
115
Metadata
11:37
116
npm run build
02:31
117
Github Deployment
04:16
118
Prod Test
02:14
119
Lighthouse Test
03:48
120
Image Lighthouse
04:45
121
Lighthouse Accessibility Score
01:56
122
Aspect Ratio Image Lighthouse
02:27
123
Lighthouse Image Run Test
05:00
124
Exercise: Imposter Syndrome
02:56
125
Project Overview
05:55
126
Setting Up Our Master Project
02:03
127
Setup Fonts
03:49
128
Add Font to _Document
05:03
129
Global App Styling
07:57
130
Netflix Component Architecture
04:28
131
Banner Component
03:50
132
Banner Component Structure
09:36
133
Banner Component Button With Font
08:26
134
Icons with Google Fonts
04:03
135
NavBar Component Structure
07:28
136
NavBar Component Styling
08:55
137
NavBar Router
08:55
138
NavBar Dropdown
04:57
139
NavBar Logo Icons
07:03
140
Card Component Architecture
02:20
141
Card Component Structure
06:10
142
Card Component Size
08:35
143
Card Component Error Handling
09:33
144
Card Component Image Error
04:01
145
Framer Motion with Card
04:16
146
Implement Framer Motion with Card
08:36
147
Section Cards Architecture
01:18
148
Section Cards Structure
06:44
149
Section Cards Styling
05:16
150
Card Scaling Feature
08:14
151
Refactor Section Cards Component
08:05
152
Youtube API Overview
02:26
153
Which Youtube API To Use?
06:36
154
Implement Youtube Search API
06:27
155
Implement Youtube Search API (continued)
05:00
156
Data Fetching Technique: Server Side Rendering
06:18
157
Serverside Rendering (SSR) Rules in Next.js
02:49
158
Implement Serverside Rendering (SSR) to Fetch Videos
06:35
159
Youtube API: Google Console Project
07:05
160
Invoke Youtube API
07:31
161
Implement More Sections For Videos
05:45
162
Error Handling for Video Library
06:30
163
Popular Videos API Docs
08:47
164
Implement Popular Videos
06:18
165
Section Overview
02:29
166
What is Passwordless Authentication?
04:59
167
Overview of Sign-in Page
03:44
168
Setup of Sign-in Page
05:40
169
Sign-in Header Component
03:56
170
Sign-in Page Structure
05:59
171
Sign-in Page Styling
07:14
172
Sign-in Form Validation
09:24
173
Sign-in Routing To Dashboard
07:19
174
What is Magic Links?
08:58
175
Setup Magic Account
06:56
176
Install Magic in App
03:46
177
Magic API Keys
06:36
178
Magic SDK (continued)
02:58
179
Magic Docs For Login
04:34
180
Magic Implementation
08:13
181
Magic SDK Storage and Routing
04:31
182
Magic Loading State
05:59
183
Routing Delay with Login
06:54
184
Username on NavBar
09:18
185
SignOut a User
08:46
186
App Route once LoggedIn
07:13
187
Routing Flicker with Login
06:15
188
Loading Component
04:23
189
Project Architecture
03:51
190
What Are We Building and Video Id Page Route
04:26
191
Create Dynamic Route: Video Id Page
03:38
192
Link Dynamic Page to Card Component Routing
04:26
193
Connect Link Component
02:54
194
Connect Banner Component
03:56
195
React Modal Docs
02:57
196
Install React Modal Component
08:34
197
Modal Component Styles
01:45
198
Implement Youtube API Player & Docs
08:33
199
Youtube Player Styling
04:18
200
Modal Component Structure
09:22
201
Modal Styling
03:14
202
Which Data Fetching Techniques To Use?
07:44
203
What is Incremental Static Regeneration?
07:06
204
Incremental Static Regeneration Fallback
04:28
205
ISR (Incremental Static Regeneration) Demo and Next Steps
03:19
206
Incremental Static Regeneration (ISR) Docs
04:50
207
Implement Incremental Static Regeneration (ISR)
07:26
208
Incremental Static Regeneration with Youtube API Docs
05:20
209
Architectural Diagram
01:17
210
Youtube API by ID
10:25
211
Fix Link Component Route
02:25
212
ISR Query Params
05:42
213
Navbar Component
04:40
214
YouTube Quota Limit: Test Data
08:51
215
Section Overview
04:16
216
Why GraphQL?
07:34
217
What is GraphQL?
06:54
218
GraphQL Example
04:58
219
GQL Query vs Mutation
05:46
220
What is Hasura?
05:50
221
Hasura API Explorer
07:33
222
Hasura Dashboard and Signup
03:13
223
Hasura Setup DB
02:24
224
Hasura Create PostGres DB
04:11
225
Hasura DB Architecture
07:23
226
Hasura DB Architecture (continued)
06:24
227
Setup DB
06:38
228
Hasura Try Out Tables
05:10
229
Query Live Hasura Server
06:41
230
Query Live Hasura Server with Environment Variables
05:46
231
Hasura User Roles
07:36
232
User Roles: Why JWT (JSON Web Tokens)
05:18
233
What is JWT (JSON Web Token)
06:53
234
JWT (JSON Web Token) Secret
06:40
235
Create JWT Secret and Update Roles
07:25
236
Section Overview
02:29
237
Authentication Architecture
05:33
238
Login API
05:19
239
Login API Architecture
06:08
240
Login API Create Auth Header
05:03
241
Login API Magic Server Side SDK
06:25
242
Login API Magic Server Side SDK Testing
05:48
243
Login API JWT (JSON Web Token) Docs
04:38
244
Login API Create JWT (JSON Web Token)
08:15
245
Login API Hasura Check New User
05:39
246
Login API Check New User Query
09:37
247
Login API Refactor
07:24
248
Login API New User Hasura Dashboard
04:08
249
Login API Create New User Mutation
10:32
250
Login API Overview and Cookie
05:28
251
Login API Set Token Cookie
08:03
252
Login API Set Token Cookie Testing
04:03
253
Login API Cleanup
02:14
254
Invoke Login API on Login
09:16
255
Section Overview
01:54
256
App Architecture
05:21
257
Like and Dislike Button Functionality
09:37
258
Like and Dislike Button Styling
02:05
259
Like and Dislike Button States
08:47
260
Stats Rating API Architecture
04:36
261
Stats API Creation
03:56
262
Build Stats with Request Cookies
09:26
263
Stats API Overview with JWT Verification
04:01
264
Stats API JWT Verification
03:11
265
Stats API Design GraphQL
04:21
266
Stats API Design Find User By ID
03:43
267
Find User By Id GraphQL
09:35
268
Use Query String For Video ID
03:16
269
Conditional Logic Does Video Exist?
03:37
270
GraphiQL: Insert and Update Mutation
08:24
271
Stats API Use Insert and Update Mutation
10:48
272
Stats API Testing
04:40
273
Insert And Update Mutation Implementation
07:09
274
Stats API Wrap
09:15
275
Overview of Like Dislike Functionality
01:10
276
Like Dislike Functionality
10:08
277
Like Dislike Functionality Testing
03:26
278
Stats API Design: GET Request
03:27
279
Tweak Stats API GET Request
05:05
280
Stats API Refactor
06:18
281
Invoke Stats API on Frontend
09:15
282
Watch It Again Architecture
04:47
283
Watch it Again Query Hasura
06:50
284
Watch it Again Call in SSR (ServerSide Rendering)
06:10
285
Render Watch it Again Section on Page
06:47
286
High Resolution Images in the App
05:15
287
Cookies inside SSR (ServerSide Rendering)
05:35
288
Redirects in SSR (ServerSide Rendering)
09:24
289
Create Redirect User Hook
04:24
290
Testing the Redirect User Hook
05:36
291
My List Page Architecture
02:40
292
Build My List Page
06:12
293
Styling My List Page
02:40
294
Hasura Query for My List Page
04:57
295
Server Side Render My List Page
07:13
296
Wrap Cards in My List Page
08:47
297
Logout Assignment
06:01
298
Middleware Introduction
06:18
299
Middleware - Let's Try it Out
06:09
300
Middleware Implementation Continued
09:18
301
How To Make Cloud Ready App
05:49
302
Create Github Repo
06:56
303
Application Cleanup
03:26
304
Deployment To Vercel
07:35
305
Try The App On Vercel
08:08
306
Application Testing on Vercel
03:38
307
Run Production Next Build
06:38
308
Thank You!
01:18
Unlock unlimited learning

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

Learn more about subscription

What courses are similar to Complete Next.js Developer in 2023: Zero to Mastery?

More courses by Zero To Mastery

Frequently asked questions

What are the prerequisites for enrolling in this Next.js course?
To get the most out of the course, students should have a foundational understanding of JavaScript and React. Familiarity with basic web development concepts, such as HTML and CSS, will also be beneficial. The course begins with setting up Next.js, and having prior experience with VS Code as an editor will help, as the course includes a setup walkthrough for it.
What projects will I build during this Next.js course?
Throughout the course, you'll work on building enterprise-level React applications using Next.js. One of the key projects includes a blog app, where you'll engage in architecture and code walkthroughs. You'll also get hands-on experience with server components, dynamic routing, and implementing different rendering techniques like SSG, SSR, and ISR.
Who is the target audience for this Next.js course?
The course is designed for both beginners and experienced developers who want to deepen their understanding of Next.js and build scalable, high-performance web applications. It is particularly beneficial for those aiming to become Next.js developers and seeking to enhance their skills with modern best practices.
How does the depth of this course compare to other Next.js courses?
This course offers a comprehensive look at Next.js, covering 308 lessons over 32 hours. It delves into advanced topics like serverless functions, different rendering techniques, and the use of Tailwind CSS. Unlike many other courses, it includes detailed project walkthroughs and exercises on server and client components, providing a thorough understanding of Next.js.
Which specific tools and platforms will be used in the Next.js course?
The course involves the use of VS Code for editor setup and Tailwind CSS for styling. You'll learn about deploying applications using serverless functions and interact with various Next.js components and APIs, such as the Metadata API and the Image Component. The course also covers the use of Google Fonts and local fonts.
What topics are not covered in this Next.js course?
While the course is comprehensive, it does not cover backend development frameworks or advanced database management. The focus is primarily on the front-end aspects of using Next.js, including routing, rendering techniques, and component management. Students looking for backend integration will need to seek additional resources.
What is the expected time commitment to complete the Next.js course?
The course has a total runtime of approximately 32.5 hours, spread across 308 lessons. The time commitment will vary depending on your prior experience and pace of learning. However, to fully absorb the material and complete the exercises and projects, students should plan to dedicate additional time beyond watching the video lessons.