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

Watch Online Complete Next.js Developer in 2023: Zero to Mastery

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

React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
Real-Time Collaborative Apps with Next.js and Supabase

Real-Time Collaborative Apps with Next.js and Supabase

Sources: fullstack.io
This course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame
51 minutes 59 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Sources: udemy
Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
20 hours 25 minutes 13 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds