Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Complete Next.js Developer: Zero to Mastery

via Zero To Mastery

Go to class Write review

Details

Provider

Zero To Mastery
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

38 hours
Sessions

On-Demand

Found in

Overview

Updated for Next.js 14! 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 (including a Netflix clone!) from scratch and get hired as a Next.js Developer. Go from zero to Next.js Mastery.

Build REAL enterprise-level NextJS applications and deploy them 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

Syllabus

Section 1 - Introduction

Complete Next.js Developer: Zero to Mastery
Next.js Course Outline
The Two Paths: App Router vs. Pages Router
Which Path To Take?
Exercise: Meet Your Classmates and Instructor
Course Resources
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal

Section 2 - Next.js Fundamentals (including React)

Section Overview
What is Next.js?
Optional: Learn React Fundamentals
Benefits of Next.js and Different Rendering Techniques
Performance with Next.js
Image Component in Next.js
File Based Routing and SEO
Serverless Functions in Next.js
Next.js vs Create React App
Let's Have Some Fun (+ Free Resources)

Section 3 - App Router - Project #1: Build Your First Next App

Project Overview: What Are We Building?
Create Next.js App Zero Config
Editor Setup VS Code
Next.js Setup Project Walkthrough - Part 1
Next.js Setup Project Walkthrough - Part 2
What Is Tailwind CSS?
Let's Get Ready for the Home Page!
App Background
Next.js Fonts Walkthrough
Next.js Google Fonts
Using Multiple Fonts
Using Local Fonts
Metadata API
Unlimited Updates

Section 4 - App Router - Server Components and Client Components

What Are Server Components?
Why Do We Need Server Components?
When to Use Server vs. Client Components
Walkthrough of the Blog App Architecture
Code Walkthrough of the Blog App
Exercise: Server Components
Solution: Server Components
Exercise: Moving Client Components Down the Tree
Solution: Moving Client Components Down the Tree
Let’s Add Our Client Component Banner!
Course Check-In

Section 5 - App Router - Routing with Next.js

Introduction to Routing
Routing Terminology
Dynamic Routing
Dynamic Routing Example
Catch All Routes
Differences between Catch All and Dynamic Routes
Exercise: Routing
Link Component
Nested Routes Link
Dynamic Pages with Link Component
Exercise: Link Component Routing
Implement a New Life System

Section 6 - App Router - SEO Hydration-Different Rendering Techniques

What is SEO?
Client Rendering vs. Server Rendering
Pre-Rendering Hydration
Different Rendering Techniques
Static Site Generation (SSG)
Server-Side Rendering (SSR)
Incremental Site Regeneration (ISR)
Client-Side Rendering (CSR)
Code Walkthrough
Data Caching
Fetch API Twist in Next.js
Implement SSG
Implement ISR
Implement SSR

Section 7 - App Router - Static Coffee Stores

Project Architecture
Card Server or Client Component?
Build Card Component
Add Coffee Stores on Page
Image Component Blur
Mapbox API Setup
Environment Variables
generateStaticParams API
generateStaticParams
Mapbox Library
Transform Coffee Data
Data Fetching Walkthrough with Fetch
Unique ID
Transform Coffee Store Data
Unique ID
Coffee Store Page Styling
Generate Static Params
Important Note: Unsplash API Account
Setup Unsplash
Setup Unsplash API

Section 8 - App Router - Dynamic Coffee Stores by Location

Geolocation API
Server or Client Component Dilemma
Refactor Components
Implement Handle Track Location
Server Cannot Be Child Component
Loading in Geolocation
Find Lat Long
Error Handling
Stores Near Me
What Are Route Handlers?
Implement Route Handler
Call Route Handler
Dynamic Route Handler

Section 9 - App Router - Server Actions and Serverless Functions

Walkthrough of the Coffee Store Page
Best Spot to Invoke Store
Setup Airtable
Airtable API
Architecture Airtable
Find Record by ID
Refactor Code
Create Coffee Store
Upvote Design
Voting Count
Server Actions
Server Actions Walkthrough
Routing Server Actions
Exercise: Server Actions
Solution: Server Actions
Create Server Action in Content Security Policy (CSP)
Update Coffee Store
Pass ID
UseFormState
Loading States Server Action
Error Page
Loading Coffee Store Page
Metadata

Section 10 - App Router - Deployment and Built Optimization

npm run build
Github Deployment
Prod Test
Lighthouse Test
Image Lighthouse
Lighthouse Accessibility Score
Aspect Ratio Image Lighthouse
Lighthouse Image Run Test
Exercise: Imposter Syndrome

Section 11 - Pages Router - Project Setup | Netflix with Next.js

Project Overview
Github Projects and Resources
Setting Up Our Master Project
Setup Fonts
Add Font to _Document
Global App Styling

Section 12 - Pages Router - Netflix Home Page and Video

Netflix Component Architecture
Banner Component
Banner Component Structure
Banner Component Button With Font
Icons with Google Fonts
NavBar Component Structure
NavBar Component Styling
NavBar Router
NavBar Dropdown
NavBar Logo Icons
Card Component Architecture
Card Component Structure
Card Component Size
Card Component Error Handling
Card Component Image Error
Framer Motion with Card
Implement Framer Motion with Card
Section Cards Architecture
Section Cards Structure
Section Cards Styling
Card Scaling Feature
Refactor Section Cards Component
Youtube API Overview
Which Youtube API To Use?
Implement Youtube Search API
Implement Youtube Search API (continued)
Data Fetching Technique: Server Side Rendering
Serverside Rendering (SSR) Rules in Next.js
Implement Serverside Rendering (SSR) to Fetch Videos
Youtube API: Google Console Project
Invoke Youtube API
Exercise: Youtube API Query
Solution: Youtube API Query
Implement More Sections For Videos
Error Handling for Video Library
Popular Videos API Docs
Implement Popular Videos

Section 13 - Pages Router - Authentication with Magic | Netflix with Next.js

Section Overview
What is Passwordless Authentication?
Overview of Sign-in Page
Setup of Sign-in Page
Quick Note: EsLint Error
Sign-in Header Component
Sign-in Page Structure
Sign-in Page Styling
Sign-in Form Validation
Sign-in Routing To Dashboard
What is Magic Links?
Setup Magic Account
Install Magic in App
Magic API Keys
Magic SDK (continued)
Magic Docs For Login
Magic Implementation
Magic SDK Storage and Routing
Magic Loading State
Routing Delay with Login
Quick Note: Next.js Warning: useEffect with async
Username on NavBar
SignOut a User
App Route once LoggedIn
Routing Flicker with Login
Loading Component

Section 14 - Pages Router - Incremental Static Regeneration | Netflix with Next.js

Project Architecture
What Are We Building and Video Id Page Route
Create Dynamic Route: Video Id Page
Link Dynamic Page to Card Component Routing
Connect Link Component
Exercise: Link Component
Solution: Link Component
Connect Banner Component
React Modal Docs
Install React Modal Component
Quick Note: Modal onRequestClose stopped working after applying styling
Modal Component Styles
Implement Youtube API Player & Docs
Youtube Player Styling
Modal Component Structure
Modal Styling
Which Data Fetching Techniques To Use?
What is Incremental Static Regeneration?
Incremental Static Regeneration Fallback
ISR (Incremental Static Regeneration) Demo and Next Steps
Incremental Static Regeneration (ISR) Docs
Implement Incremental Static Regeneration (ISR)
Incremental Static Regeneration with Youtube API Docs
Architectural Diagram
Youtube API by ID
Fix Link Component Route
ISR Query Params
Navbar Component
YouTube Quota Limit: Test Data

Section 15 - Pages Router - Hasura GraphQL | Netflix with Next.js

Section Overview
Why GraphQL?
What is GraphQL?
GraphQL Example
GQL Query vs Mutation
What is Hasura?
Hasura API Explorer
Hasura Dashboard and Signup
Hasura Setup DB
Hasura Create PostGres DB
Hasura DB Architecture
Hasura DB Architecture (continued)
Setup DB
Hasura Try Out Tables
Query Live Hasura Server
Query Live Hasura Server with Environment Variables
Hasura User Roles
User Roles: Why JWT (JSON Web Tokens)
What is JWT (JSON Web Token)
JWT (JSON Web Token) Secret
Create JWT Secret and Update Roles

Section 16 - Pages Router - Authentication with Hasura | Netflix with Next.js

Section Overview
Authentication Architecture
Quick Note: How to use Postman?
Login API
Login API Architecture
Login API Create Auth Header
Login API Magic Server Side SDK
Login API Magic Server Side SDK Testing
Login API JWT (JSON Web Token) Docs
Important Note: Users array is Empty and JWT content in HASURA
Login API Create JWT (JSON Web Token)
Login API Hasura Check New User
Login API Check New User Query
Login API Refactor
Login API New User Hasura Dashboard
Login API Create New User Mutation
Login API Overview and Cookie
Login API Set Token Cookie
Login API Set Token Cookie Testing
Login API Cleanup
Invoke Login API on Login

Section 17 - Pages Router - Ratings Service and My List Page | Netflix with Next.js

Section Overview
App Architecture
Like and Dislike Button Functionality
Like and Dislike Button Styling
Like and Dislike Button States
Stats Rating API Architecture
Stats API Creation
Build Stats with Request Cookies
Stats API Overview with JWT Verification
Stats API JWT Verification
Stats API Design GraphQL
Troubleshooting: Don't See Users or Stats Table Info?
Stats API Design Find User By ID
Find User By Id GraphQL
Use Query String For Video ID
Conditional Logic Does Video Exist?
GraphiQL: Insert and Update Mutation
Stats API Use Insert and Update Mutation
Stats API Testing
Insert And Update Mutation Implementation
Stats API Wrap
Overview of Like Dislike Functionality
Like Dislike Functionality
Like Dislike Functionality Testing
Stats API Design: GET Request
Tweak Stats API GET Request
Stats API Refactor
Invoke Stats API on Frontend
Watch It Again Architecture
Watch it Again Query Hasura
Watch it Again Call in SSR (ServerSide Rendering)
Render Watch it Again Section on Page
High Resolution Images in the App
Cookies inside SSR (ServerSide Rendering)
Redirects in SSR (ServerSide Rendering)
Create Redirect User Hook
Testing the Redirect User Hook
My List Page Architecture
Build My List Page
Styling My List Page
Hasura Query for My List Page
Server Side Render My List Page
Wrap Cards in My List Page
Logout Assignment
Logout Solution
Exercise: SSR Redirects
Solution: SSR Redirects

Section 18 - NextJS: The New Features

Middleware Introduction
Important Note: Creating Middleware
Important Note: Middleware Updates
Middleware - Let's Try it Out
Middleware Implementation Continued
Important Note: > Next.js Cookies

Section 19 - Pages Router - Deployment | Netflix with Next.js

How To Make Cloud Ready App
Create Github Repo
Application Cleanup
Deployment To Vercel
Try The App On Vercel
Application Testing on Vercel
Run Production Next Build

Where To Go From Here?

Thank You!
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements

Appendix: Learning React

React Fundamentals Lessons
Next Steps

Taught by

Andrei Neagoie and Ankita Kulkarni

Reviews

Start your review of Complete Next.js Developer: Zero to Mastery