You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Next.js Developer: Zero to Mastery
Section 1 - Introduction
Complete Next.js Developer: Zero to Mastery (2:32)
Next.js Course Outline (5:30)
The Two Paths: App Router vs. Pages Router (11:03)
Which Path To Take? (5:07)
Exercise: Meet Your Classmates and Instructor
Course Resources
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
Section 2 - Next.js Fundamentals (including React)
Section Overview (2:07)
What is Next.js? (1:52)
Optional: Learn React Fundamentals
Benefits of Next.js and Different Rendering Techniques (4:38)
Performance with Next.js (6:26)
Image Component in Next.js (4:13)
File Based Routing and SEO (6:11)
Serverless Functions in Next.js (4:35)
Next.js vs Create React App (6:11)
Let's Have Some Fun (+ Free Resources)
Section 3 - App Router - Project #1: Build Your First Next App
Project Overview: What Are We Building? (5:32)
Create Next.js App Zero Config (8:57)
Editor Setup VS Code (7:25)
Next.js Setup Project Walkthrough - Part 1 (9:31)
Next.js Setup Project Walkthrough - Part 2 (7:13)
What Is Tailwind CSS? (8:26)
Let's Get Ready for the Home Page! (4:16)
App Background (5:35)
Next.js Fonts Walkthrough (4:14)
Next.js Google Fonts (6:10)
Using Multiple Fonts (4:45)
Using Local Fonts (5:40)
Metadata API (4:10)
Unlimited Updates
Section 4 - App Router - Server Components and Client Components
What Are Server Components? (8:11)
Why Do We Need Server Components? (3:00)
When to Use Server vs. Client Components (3:38)
Walkthrough of the Blog App Architecture (1:43)
Code Walkthrough of the Blog App (4:18)
Exercise: Server Components (4:24)
Solution: Server Components (3:38)
Exercise: Moving Client Components Down the Tree (7:06)
Solution: Moving Client Components Down the Tree (1:55)
Let’s Add Our Client Component Banner! (5:06)
Course Check-In
Section 5 - App Router - Routing with Next.js
Introduction to Routing (7:06)
Routing Terminology (3:03)
Dynamic Routing (3:55)
Dynamic Routing Example (2:21)
Catch All Routes (3:20)
Differences between Catch All and Dynamic Routes (2:39)
Exercise: Routing (1:17)
Link Component (2:36)
Nested Routes Link (3:08)
Dynamic Pages with Link Component (2:13)
Exercise: Link Component Routing (0:59)
Implement a New Life System
Section 6 - App Router - SEO Hydration-Different Rendering Techniques
What is SEO? (9:37)
Client Rendering vs. Server Rendering (6:22)
Pre-Rendering Hydration (4:09)
Different Rendering Techniques (4:22)
Static Site Generation (SSG) (5:38)
Server-Side Rendering (SSR) (3:10)
Incremental Site Regeneration (ISR) (4:25)
Client-Side Rendering (CSR) (4:01)
Code Walkthrough (3:29)
Data Caching (3:57)
Fetch API Twist in Next.js (4:31)
Implement SSG (4:33)
Implement ISR (3:44)
Implement SSR (3:04)
Section 7 - App Router - Static Coffee Stores
Project Architecture (5:46)
Card Server or Client Component? (2:07)
Build Card Component (6:21)
Add Coffee Stores on Page (6:00)
Image Component Blur (3:30)
Mapbox API Setup (4:19)
Environment Variables (2:49)
generateStaticParams API (1:43)
generateStaticParams (3:53)
Mapbox Library (5:51)
Transform Coffee Data (8:13)
Data Fetching Walkthrough with Fetch (2:18)
Unique ID (1:28)
Transform Coffee Store Data (4:45)
Unique ID (1:27)
Coffee Store Page Styling (3:43)
Generate Static Params (3:29)
Important Note: Unsplash API Account
Setup Unsplash (3:10)
Setup Unsplash API (2:43)
Exercise: Implement Unplash API
Section 8 - App Router - Dynamic Coffee Stores by Location
Geolocation API (3:50)
Server or Client Component Dilemma (1:52)
Refactor Components (2:20)
Implement Handle Track Location (5:28)
Server Cannot Be Child Component (3:20)
Loading in Geolocation (3:42)
Find Lat Long (2:57)
Error Handling (3:27)
Stores Near Me (8:15)
What Are Route Handlers? (4:58)
Implement Route Handler (6:36)
Call Route Handler (4:38)
Dynamic Route Handler (3:25)
Section 9 - App Router - Server Actions and Serverless Functions
Walkthrough of the Coffee Store Page (4:35)
Best Spot to Invoke Store (1:26)
Setup Airtable (6:08)
Airtable API (2:56)
Architecture Airtable (2:03)
Find Record by ID (7:22)
Refactor Code (5:15)
Create Coffee Store (8:31)
Upvote Design (3:12)
Voting Count (3:05)
Server Actions (3:20)
Server Actions Walkthrough (6:14)
Routing Server Actions (1:35)
Exercise: Server Actions (1:27)
Solution: Server Actions (4:11)
Create Server Action in Content Security Policy (CSP) (2:29)
Update Coffee Store (5:18)
Pass ID (2:30)
UseFormState (5:03)
Loading States Server Action (7:02)
Error Page (8:30)
Loading Coffee Store Page (4:52)
Metadata (11:36)
Section 10 - App Router - Deployment and Built Optimization
npm run build (2:30)
Github Deployment (4:15)
Prod Test (2:13)
Lighthouse Test (3:47)
Image Lighthouse (4:44)
Lighthouse Accessibility Score (1:55)
Aspect Ratio Image Lighthouse (2:26)
Lighthouse Image Run Test (4:59)
Exercise: Imposter Syndrome (2:55)
Section 11 - Pages Router - Project Setup | Netflix with Next.js
Project Overview (5:54)
Github Projects and Resources
Setting Up Our Master Project (2:02)
Setup Fonts (3:48)
Add Font to _Document (5:02)
Global App Styling (7:56)
Section 12 - Pages Router - Netflix Home Page and Video
Netflix Component Architecture (4:27)
Banner Component (3:49)
Banner Component Structure (9:35)
Banner Component Button With Font (8:25)
Icons with Google Fonts (4:02)
NavBar Component Structure (7:27)
NavBar Component Styling (8:54)
NavBar Router (8:54)
NavBar Dropdown (4:56)
NavBar Logo Icons (7:02)
Card Component Architecture (2:19)
Card Component Structure (6:09)
Card Component Size (8:34)
Card Component Error Handling (9:32)
Card Component Image Error (4:00)
Framer Motion with Card (4:15)
Implement Framer Motion with Card (8:35)
Section Cards Architecture (1:17)
Section Cards Structure (6:43)
Section Cards Styling (5:15)
Card Scaling Feature (8:13)
Refactor Section Cards Component (8:04)
Youtube API Overview (2:25)
Which Youtube API To Use? (6:35)
Implement Youtube Search API (6:26)
Implement Youtube Search API (continued) (4:59)
Data Fetching Technique: Server Side Rendering (6:17)
Serverside Rendering (SSR) Rules in Next.js (2:48)
Implement Serverside Rendering (SSR) to Fetch Videos (6:34)
Youtube API: Google Console Project (7:04)
Invoke Youtube API (7:30)
Exercise: Youtube API Query
Solution: Youtube API Query
Implement More Sections For Videos (5:44)
Error Handling for Video Library (6:29)
Popular Videos API Docs (8:46)
Implement Popular Videos (6:17)
Section 13 - Pages Router - Authentication with Magic | Netflix with Next.js
Section Overview (2:28)
What is Passwordless Authentication? (4:58)
Overview of Sign-in Page (3:43)
Setup of Sign-in Page (5:39)
Quick Note: EsLint Error
Sign-in Header Component (3:55)
Sign-in Page Structure (5:58)
Sign-in Page Styling (7:13)
Sign-in Form Validation (9:23)
Sign-in Routing To Dashboard (7:18)
What is Magic Links? (8:57)
Setup Magic Account (6:55)
Install Magic in App (3:45)
Magic API Keys (6:35)
Magic SDK (continued) (2:57)
Magic Docs For Login (4:33)
Magic Implementation (8:12)
Magic SDK Storage and Routing (4:30)
Magic Loading State (5:58)
Routing Delay with Login (6:53)
Quick Note: Next.js Warning: useEffect with async
Username on NavBar (9:17)
SignOut a User (8:45)
App Route once LoggedIn (7:12)
Routing Flicker with Login (6:14)
Loading Component (4:22)
Section 14 - Pages Router - Incremental Static Regeneration | Netflix with Next.js
Project Architecture (3:49)
What Are We Building and Video Id Page Route (4:25)
Create Dynamic Route: Video Id Page (3:37)
Link Dynamic Page to Card Component Routing (4:25)
Connect Link Component (2:53)
Exercise: Link Component
Solution: Link Component
Connect Banner Component (3:54)
React Modal Docs (2:56)
Install React Modal Component (8:33)
Quick Note: Modal onRequestClose stopped working after applying styling
Modal Component Styles (1:44)
Implement Youtube API Player & Docs (8:32)
Youtube Player Styling (4:17)
Modal Component Structure (9:21)
Modal Styling (3:13)
Which Data Fetching Techniques To Use? (7:43)
What is Incremental Static Regeneration? (7:05)
Incremental Static Regeneration Fallback (4:27)
ISR (Incremental Static Regeneration) Demo and Next Steps (3:18)
Incremental Static Regeneration (ISR) Docs (4:49)
Implement Incremental Static Regeneration (ISR) (7:25)
Incremental Static Regeneration with Youtube API Docs (5:19)
Architectural Diagram (1:16)
Youtube API by ID (10:24)
Fix Link Component Route (2:24)
ISR Query Params (5:41)
Navbar Component (4:39)
YouTube Quota Limit: Test Data (8:50)
Section 15 - Pages Router - Hasura GraphQL | Netflix with Next.js
Section Overview (4:15)
Why GraphQL? (7:33)
What is GraphQL? (6:53)
GraphQL Example (4:57)
GQL Query vs Mutation (5:45)
What is Hasura? (5:49)
Hasura API Explorer (7:32)
Hasura Dashboard and Signup (3:12)
Hasura Setup DB (2:23)
Hasura Create PostGres DB (4:10)
Hasura DB Architecture (7:22)
Hasura DB Architecture (continued) (6:23)
Setup DB (6:37)
Hasura Try Out Tables (5:09)
Query Live Hasura Server (6:40)
Query Live Hasura Server with Environment Variables (5:45)
Hasura User Roles (7:35)
User Roles: Why JWT (JSON Web Tokens) (5:17)
What is JWT (JSON Web Token) (6:52)
JWT (JSON Web Token) Secret (6:39)
Create JWT Secret and Update Roles (7:24)
Section 16 - Pages Router - Authentication with Hasura | Netflix with Next.js
Section Overview (2:28)
Authentication Architecture (5:32)
Quick Note: How to use Postman?
Login API (5:18)
Login API Architecture (6:07)
Login API Create Auth Header (5:02)
Login API Magic Server Side SDK (6:24)
Login API Magic Server Side SDK Testing (5:47)
Login API JWT (JSON Web Token) Docs (4:37)
Important Note: Users array is Empty and JWT content in HASURA
Login API Create JWT (JSON Web Token) (8:14)
Login API Hasura Check New User (5:38)
Login API Check New User Query (9:36)
Login API Refactor (7:23)
Login API New User Hasura Dashboard (4:07)
Login API Create New User Mutation (10:31)
Login API Overview and Cookie (5:27)
Login API Set Token Cookie (8:02)
Login API Set Token Cookie Testing (4:02)
Login API Cleanup (2:13)
Invoke Login API on Login (9:15)
Section 17 - Pages Router - Ratings Service and My List Page | Netflix with Next.js
Section Overview (1:53)
App Architecture (5:20)
Like and Dislike Button Functionality (9:36)
Like and Dislike Button Styling (2:04)
Like and Dislike Button States (8:46)
Stats Rating API Architecture (4:35)
Stats API Creation (3:55)
Build Stats with Request Cookies (9:25)
Stats API Overview with JWT Verification (4:00)
Stats API JWT Verification (3:10)
Stats API Design GraphQL (4:20)
Troubleshooting: Don't See Users or Stats Table Info?
Stats API Design Find User By ID (3:42)
Find User By Id GraphQL (9:34)
Use Query String For Video ID (3:15)
Conditional Logic Does Video Exist? (3:36)
GraphiQL: Insert and Update Mutation (8:23)
Stats API Use Insert and Update Mutation (10:47)
Stats API Testing (4:39)
Insert And Update Mutation Implementation (7:08)
Stats API Wrap (9:14)
Overview of Like Dislike Functionality (1:09)
Like Dislike Functionality (10:07)
Like Dislike Functionality Testing (3:25)
Stats API Design: GET Request (3:26)
Tweak Stats API GET Request (5:04)
Stats API Refactor (6:17)
Invoke Stats API on Frontend (9:14)
Watch It Again Architecture (4:46)
Watch it Again Query Hasura (6:49)
Watch it Again Call in SSR (ServerSide Rendering) (6:09)
Render Watch it Again Section on Page (6:46)
High Resolution Images in the App (5:14)
Cookies inside SSR (ServerSide Rendering) (5:34)
Redirects in SSR (ServerSide Rendering) (9:23)
Create Redirect User Hook (4:23)
Testing the Redirect User Hook (5:35)
My List Page Architecture (2:39)
Build My List Page (6:11)
Styling My List Page (2:39)
Hasura Query for My List Page (4:56)
Server Side Render My List Page (7:12)
Wrap Cards in My List Page (8:46)
Logout Assignment (6:00)
Logout Solution
Exercise: SSR Redirects
Solution: SSR Redirects
Section 18 - NextJS: The New Features
Middleware Introduction (6:17)
Important Note: Creating Middleware
Important Note: Middleware Updates
Middleware - Let's Try it Out (6:08)
Middleware Implementation Continued (9:17)
Important Note: > Next.js Cookies
Section 19 - Pages Router - Deployment | Netflix with Next.js
How To Make Cloud Ready App (5:48)
Create Github Repo (6:55)
Application Cleanup (3:25)
Deployment To Vercel (7:34)
Try The App On Vercel (8:07)
Application Testing on Vercel (3:37)
Run Production Next Build (6:37)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Appendix: Learning React
React Fundamentals Lessons
Next Steps
UseFormState
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures