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
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 |
Comments
0 commentsSimilar courses
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2
Sources: udemy
This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour
8 hours 6 minutes 25 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...
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
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
Build and Deploy a Lovable Clone
Sources: Code With Antonio
In this course, you will create an AI platform for generating applications from scratch. You will learn how to build fully functional full-stack applications...
10 hours 34 minutes 16 seconds
Want to join the conversation?
Sign in to comment