Complete Next.js Developer in 2023: Zero to Mastery

27h 12m 37s
English
Paid

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 Complete Next.js Developer in 2023: Zero to Mastery

Join premium to watch
Go to premium
# Title Duration
1 Complete Next.js Developer: Zero to Mastery 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

Similar courses to Complete Next.js Developer in 2023: Zero to Mastery

Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Nextmasteringnuxt.com

Category: React.js, Next.js
Duration 5 hours 9 minutes 45 seconds
Next.js Ecommerce

Next.js EcommerceBrad Traversy

Category: Next.js
Duration 22 hours 12 minutes 23 seconds
Build A Finance Platform

Build A Finance PlatformCode With Antonio

Category: Next.js
Duration 13 hours 43 minutes 45 seconds
Next.js From Scratch 2024

Next.js From Scratch 2024Brad Traversy

Category: Next.js
Duration 11 hours 54 minutes 9 seconds
Full Stack Development

Full Stack Developmentneetcode.io

Category: TypeScript, Next.js
Duration 4 hours 24 minutes 36 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS productMax Stoiber (@mxstbr)

Category: React.js, Others, Next.js, GraphQL, Assemblies, ready-made solutions for development
Duration
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy

Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds