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 Nextmasteringnuxt.com
Category: React.js, Next.js
Duration 5 hours 9 minutes 45 seconds
Course

Next.js EcommerceBrad Traversy
Category: Next.js
Duration 22 hours 12 minutes 23 seconds
Course

Build A Finance PlatformCode With Antonio
Category: Next.js
Duration 13 hours 43 minutes 45 seconds
Course

Next.js From Scratch 2024Brad Traversy
Category: Next.js
Duration 11 hours 54 minutes 9 seconds
Course

Full Stack Developmentneetcode.io
Category: TypeScript, Next.js
Duration 4 hours 24 minutes 36 seconds
Course

CodeFast | Learn to code in weeks, not months.Marc Lou
Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Course

Bedrock: Jumpstart your next SaaS productMax Stoiber (@mxstbr)
Category: React.js, Others, Next.js, GraphQL, Assemblies, ready-made solutions for development
Duration
Course

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy
Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds
Course