Example Curriculum
Section 1 - Introduction
Available in
days
days
after you enroll
Section 2 - Next.js Fundamentals (including React)
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Section 11 - Pages Router - Project Setup | Netflix with Next.js
Available in
days
days
after you enroll
Section 12 - Pages Router - Netflix Home Page and Video
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Section 19 - Pages Router - Deployment | Netflix with Next.js
Available in
days
days
after you enroll
Where To Go From Here?
Available in
days
days
after you enroll
Appendix: Learning React
Available in
days
days
after you enroll