Complete Next.js Developer in 2023: Zero to Mastery

27h 12m 37s
English
Paid

Course description

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.

Read more about the course
  • 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

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScript

Sources: codewithmosh (Mosh Hamedani)
Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe
5 hours 16 minutes 33 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 seconds
Next.js Firebase - The Full Course

Next.js Firebase - The Full Course

Sources: fireship.io
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then pub
2 hours 38 minutes 13 seconds
Sleek Next.JS Applications with shadcn/ui

Sleek Next.JS Applications with shadcn/ui

Sources: fullstack.io
Dive into the development of modern web interfaces by learning the basics of shadcn/ui, TailwindCSS, and Radix UI. Learn to create flexible and modular...
5 hours 10 minutes 20 seconds