Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Next.js Developer: Zero to Mastery
Introduction
Complete Next.js Developer: Zero to Mastery (2:32)
Next.js Course Outline (5:30)
Exercise: Meet Your Classmates and Instructor
Complete Course Projects + Resources
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal
Next.js Fundamentals (including React)
Section Overview (2:07)
What is Next.js? (1:52)
Next.js 13
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)
Web Developer Monthly
Project #1: Build Your First Next.js App | Coffee Connoisseur
Project overview: What are we building? (1:59)
Github Projects and Resources
Create a Next.js app: Zero Config (7:17)
How To Upgrade Your Next.js Version (11:56)
Exercise: Upgrade Next.js Version to Next.js 12
Quick Note: Next.js Versions
Upgrade to Next.js 12 (3:39)
Next.js Version Breaking Changes (6:01)
Features of Next.js 12 (13:38)
Next.js setup project walkthrough (8:24)
_app.js Exercise with Footer
_app.js Solution with Footer (4:12)
What is Fast Refresh? (3:32)
What are CSS modules? (7:48)
Let's get ready for Home Page (1:36)
App background (5:10)
Banner Component (6:44)
Mobile First Development & Banner Component Styling (7:06)
Next.js Head Component (2:47)
Let's Have Some Fun (+ Free Resources)
Project #1: Routing with Next.js
Routing in Next.js (4:35)
Add routing for Coffee Store Page (4:04)
What is Dynamic Routing? (7:23)
Add route using Link component (8:25)
Add routes to Dynamic Pages with Link Component (1:46)
Exercise: Routing
Solution: Routing (7:31)
Unlimited Updates
Project #1: Styling in Next.js
Style our homepage (5:02)
Hero Image Generator (2:59)
Add Hero Component (0:50)
Next.js Image component (4:19)
Hero Image on Home Page (2:33)
Exercise: Hero Image and Button Layout
Solution: Hero Image and Button Layout
Setup fonts in Next.js (1:52)
Load fonts on the page (3:00)
Document in Next.js (6:44)
Apply fonts in Document (5:57)
Quick Note: Fonts in Next.js
Course Check-In
Hydration, SEO and Different Rendering Techniques in Next.js
What is SEO? (7:48)
Pre-rendering in Next.js (5:43)
Plain React vs Next.js app (4:17)
Different Rendering Techniques in Next.js (2:09)
How Pre-rendering helps with Performance (4:41)
Static Site Generation (SSG) in Next.js (5:16)
Incremental Static Regeneration (ISG) in Next.js (6:29)
Quick Note: Incremental Static Regeneration
Serverside Rendering (SSR) in Next.js (4:38)
Client Side Rendering (CSR) in Next.js (3:39)
Implement a New Life System
Project #1: Static Coffee Store Pages
Project Component Architecture (2:54)
Card Component Structure (6:02)
Card Component Styling (7:28)
Grid Layout For Card Component (6:05)
Coffee Stores data
React Strict and Coffee Stores Rendering Twice
Add Coffee Stores on Page (4:43)
Next.js: next.config.js Use Unsplash Image (4:28)
What to Pre-render in Coffee Connoisseur App (2:55)
Default Pre-rendering in Next.js (1:45)
Implement Static Site Generation (SSG) (6:57)
Characteristics of Get Static Props in Next.js (6:45)
Coffee Stores Heading (7:00)
Get Static Paths in Next.js (3:57)
Characteristics of Get Static Paths in Next.js (2:14)
Implement Get Static Props and Get Static Paths in Next.js (7:58)
Fallback in Next.js (9:23)
Fallback: false with 404 Page (2:05)
Fallback: true (9:40)
Refactor Coffee Store Page (5:29)
Coffee Store Page Styling (7:36)
Coffee Store Page Styling (continued) (9:36)
Setup Foursquare Account (6:01)
Foursquare Places API (3:55)
Rate Limiting (2:25)
Foursquare Places API Playground (3:24)
Foursquare API in Get Static Props (2:06)
Fetch API Async Await (7:33)
Env Local vs Env Next.config.js (3:59)
Environment Variables in Next.js (2:11)
Coffee Stores Library (5:40)
Update Foursquare API in Get Static Paths (4:19)
Update Coffee Store Library Data (3:31)
Important Note: Unsplash API Account
Setup Unsplash API (6:46)
Invoke Unsplash API for Coffee Store Images - Part 1 (3:19)
Invoke Unsplash API for Coffee Store Images - Part 2 (2:33)
Update Coffee Store Library with Images (2:37)
Quick Note: Unsplash API perPage should be 30
Display Coffee Store Images in the Card (5:52)
Exercise: Display all coffee store images
Solution: Display all coffee store images
Individual Coffee Store Page data (5:32)
Update Styling for the App (1:57)
Project #1: Coffee Stores by Location
Section Overview (1:28)
Geolocation API Docs (4:32)
Using React Hooks (1:18)
Create React Hook for Retrieving User Location (6:19)
Use the hook for Retrieving User Location (10:19)
Quick Note: useEffect in Function
Client Side Rendering (CSR) Coffee Stores (9:23)
Display Coffee Stores by Location on the Page (4:55)
Refresh the Dynamic Route (Non-static) (4:02)
Fallback in Next.js (3:39)
Use React Context and Why to Use Context? (4:09)
Create Store Context (5:17)
Create Store Reducer in Context (7:53)
Store Coffee Stores in Store Context (8:51)
Coffee Store Page with Context (3:31)
Coffee Store Page for Non-SSG Routes (6:35)
Refactor Coffee Store App (4:30)
Project #1: Serverless Functions
What are API's? (7:49)
What are Serverless Functions? (6:24)
API routing with Next.js (2:28)
Hello World API route (4:39)
Exercise: Create a Serverless Function
Solution: Create a Serverless Function
Catch All Routes in Next.js (5:32)
Create a Serverless Function for Getting Coffee Stores (8:39)
Invoke Serverless Function: Get Coffee Stores (5:37)
Serverless Functions inside Get Static Props (3:16)
Project #1: Data Storage Using Airtable
Project Architecture (7:25)
What is Airtable? (4:25)
Setup Airtable (8:21)
API Architecture: Coffee Store Page (5:41)
Airtable Library (7:08)
Basic Coffee Store API / Serverless function (6:50)
API Design: Create Coffee Store (7:21)
Find Coffee Store API (5:28)
Transform Coffee Store Data (5:13)
Airtable Docs: Create Coffee Store (9:05)
Airtable Docs: Create Coffee Store (continued) (5:03)
API Error Handling (5:59)
Refactor Create Coffee Store API (9:14)
API Architecture: Invoke API on Coffee Store Page (4:29)
Important Note: Coffee Stores are created twice and React Strict Mode
Invoke Coffee Store API once user navigates (9:56)
Create Coffee Store for Statically Generated Route (5:33)
Exercise: Imposter Syndrome (2:55)
Project #1: SWR with Client Side Rendering
SWR Design (3:33)
Voting Feature Design (4:09)
Coffee Store By Id API (7:15)
Coffee Store By Id API Validation (5:59)
Refactor Coffee Store By Id API (8:57)
What is SWR? (State While Revalidate) (7:02)
Important Note: Latest SWR Version: Breaking Changes
SWR Docs Fetch API (0:51)
Use SWR on the Coffee Store Page (8:58)
API Design: Favourite Coffee Store By Id API (6:14)
Airtable Docs: Favourite Coffee Store By Id API (6:50)
Favourite Coffee Store By Id API (9:29)
Favourite Coffee Store By Id API (continued) (7:51)
Favourite Coffee Store By Id API wrap (8:16)
Invoke Favourite Coffee Store By Id API (5:19)
Application Demo (5:44)
Airtable Final Demo (3:05)
Refactor and Cleanup (4:19)
Project #1: Deployment and Build Optimization
What is Deployment? (4:49)
Important Note: Running Next Build
Running Your Application Next Build (8:55)
Cloud Ready Application (5:42)
Setting up Github Repository (1:14)
Create a Github Repository and Push Your Code (6:06)
Important: Coffee stores appear from different location on Vercel
Deployment to Vercel (10:19)
Quick Note: Environment Variables
Vercel Dashboard Walkthrough (2:44)
Vercel Production Build Files (4:59)
What is Netlify? (6:00)
Netlify Deployment (10:37)
Quick Note: Netlify Plugin Updates
Netlify Deployment Configuration Changes (9:33)
Lighthouse Performance (4:31)
Quick Note: Lighthouse Score
Lighthouse Performance and SEO Report (9:16)
Exercise: Lighthouse Improvements
Quick Note: Lighthouse Performance
Master Project: Project Setup | Netflix with Next.js
Project Overview (5:54)
Github Projects and Resources
Setting Up Our Master Project (3:07)
Setup Fonts (3:48)
Add Font to _Document (5:02)
Global App Styling (7:56)
Master Project: 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)
Master Project: 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)
Master Project: 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)
Master Project: 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 (5:54)
Hasura Create PostGres DB (5:27)
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)
Master Project: 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)
Master Project: 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)
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
NextJS 12: The New Features
NextJS 12: Middleware Introduction (6:17)
Important Note: Creating Middleware
Important Note: Middleware Updates
NextJS 12: Middleware Lets Try it Out (6:08)
NextJS 12: Middleware Implementation Continued (9:17)
Important Note: > Next.js 12.2 Cookies
Master Project: 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!
Learning Guideline
LinkedIn Endorsements
Become An Alumni
Coding Challenges
Appendix: Learning React
React Fundamentals Lessons
Next Steps
Basic Coffee Store API / Serverless function
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