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
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 Title | Duration | Access |
---|---|---|---|
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 subscriptionComments
0 commentsSimilar courses

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

supastarter - SaaS starter kit for Next.js & Nuxt
Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...

Build A Canva Clone
Sources: Code With Antonio
In this 18-hour course, we will create a platform for graphic design with numerous features. You will learn how to create an intuitive editor for cust...
17 hours 48 minutes 39 seconds

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Sources: udemy
If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course i...
13 hours 2 minutes 12 seconds
Want to join the conversation?
Sign in to comment