Back to courses

Complete Next.js Developer in 2023

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 (like a Netlifx clone!) from scratch and get hired as a Next.js Developer in 2023. Go from Zero To Next.js Mastery.

Last updated: May 2023

Course overview

Using the latest Next.js features for 2023, we guarantee you this is the most comprehensive online course on Next.js and React. You will learn Next.js by building real-world projects (including a massive Netflix clone application) step-by-step alongside senior industry professionals.

What you'll learn

  • 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

This Next.js course is focused on efficiency. So you never have to waste your time on confusing, out-of-date, incomplete tutorials anymore.

Instead, we'll push you beyond the basics so that you can build modern, enterprise-level apps using the latest version of Next.js.

And you'll be learning Next.js in good company.

By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Active. Thriving. Supportive. Helpful. Friendly. Motivating. Essential.

These are just a few of the words students use to describe the ZTM Discord which is also one of the biggest and most active developer communities on Discord.

Most importantly, you will be learning from industry professionals (Ankita and Andrei) that have actual real-world experience using Next.js as Senior Engineers working for top companies in both Silicon Valley and Toronto. Ankita is also a regular speaker and lecturer at major Next.js and React conferences.

This project-based course will introduce you to the modern toolchain of a Next.js developer in 2023.

Along the way, you will build a massive Netflix Clone application using React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel + more.

This is a full-stack app unlike what you will find in most Next.js tutorials online!

All code is provided step-by-step so even if you don’t like to code along, you will get access to the full master project code (reminder... building Netflix!) to add to your portfolio.

Here is what the course will cover to take you from Zero to Next.js Mastery

The curriculum is very hands-on as we walk you from start to finish of releasing a professional Next.js project all the way into production.

We start from the very beginning by teaching you Next.js fundamentals.

But we don't stop there, we'll then dive into advanced topics so that you can make good decisions on architecture and tools for any of your future NextJS projects.

Here's a quick look at all the topics you'll learn:

1. Next.js Fundamentals

We'll compare Next.js vs React and learn about the benefits that Next.js offers. You will understand why Next.js has gained so much popularity and what JAM Stack is all about. This section will build the foundation you need for the rest of the course.

2. Build your first Next.js app | Coffee Connoisseur Project

You will be building your first project right away. The goal of this project is to teach you the fundamentals of Next.js. This section focuses on setting up the project, teaching fundamentals such as CSS modules, fast refresh, how the project is set up, etc.

3. Routing with Next.js | Coffee Connoisseur

You will learn everything about routing such as dynamic routes, index routes, named routes, and link component.

4. Styling in Next.js | Coffee Connoisseur

This section will teach you how to style your applications using css modules, separate components styles, and global styles.

5. Hydration, SEO and Different Rendering Techniques in Next.js

One of the most important sections of the course. The section will teach you about what SEO is, how Next.js helps with SEO, what the different rendering techniques are such as: static site generation, server-side rendering, incremental static regeneration (and how they are different), client-side rendering, and what is hydration.

6. Static Coffee Store Pages | Coffee Connoisseur

You will learn about static rendering in detail and how to choose what to statically render. You will make API requests to Foursquare and rendering those using SSG.

7. Coffee stores by Location | Coffee Connoisseur

Next.js allows you to use different fallbacks when you choose to statically render. This section will talk about that in-depth. You will also learn how to retrieve users location and use the Context API.

8. Serverless functions | Coffee Connoisseur

What are serverless functions? Why do we use them and when? You will be creating serverless functions for retrieving static coffee stores.

9. Store Coffee Store Data using Airtable | Coffee Connoisseur

You will learn about database storage using Airtable. We will be storing the coffee store data in Airtable and will learn client-side rendering here.

10. SWR with Client Side Rendering | Coffee Connoisseur

What is SWR? When to use it? We will be using the Next.js library for SWR, and using SWR and client-side rendering in this section.

11. Deployment and Build Optimization | Coffee Connoisseur

Deploy your app to Vercel as well as Netlify. You will learn what the different cloud providers are and how Vercel is different, what is Lighthouse, and how to improve our performance in Next.js.

12. Project Setup | Building Netflix with Next.js Project

This is a big one! You will start to set up for the major project. This section is about setting up our Netflix project.

13. Netflix Home Page and Video | Building Netflix with Next.js

You will build the homepage and use server-side rendering. You will learn how to server render content and how to invoke the YouTube API to get a list of videos and display them on the homepage. The card component is complex in Netflix so you will also learn some framer motion to build the card component.

14. Authentication with Magic | Building Netflix with Next.js

How does Auth work in Next.js? We will be using passwordless login in Next and building the login page with proper authentication and validation.

15. Incremental Static Regeneration | Building Netflix with Next.js

Display the videos on the homepage and use ISR to build the modal as a page. You will learn more about incremental static generation to build this modal.

16. Hasura GraphQL | Building Netflix with Next.js

You will learn what is GraphQL, Hasura, and how Hasura architecture looks like. We will be setting up the project with the Hasura environment.

17. Authentication with Hasura | Building Netflix with Next.js

You will learn how auth flow architecture works and introduce server side SDK to log the user in.

18. Ratings Service and Favourited Videos Page | Building Netflix with Next.js

You will setup Hasura for ratings service, create a ratings API to like and dislike videos, and build the my list page to show a list of favorited videos.

19. Deploying to Production | Netflix with Next.js

Create the final GitHub repo, set-up the repo, and finally deploy to Vercel!

20. Appendix: Introduction to React

An optional section for those that need a primer on React.js and React Hooks to get you ready to get the most out of this course.

What's the best part?

This course will be constantly evolving and updating as the landscape changes.

Just as the NextJS ecosystem evolves, this course will also constantly evolve and be updated with new lectures and resources for you.

So you can come back to this course anytime you want to review the latest NextJS best practices.

What's the bottom line?

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!

This course will push you and challenge you to go from an absolute beginner in Next.js to someone that is in the top 10% of Next.js and React developers 💪.

How do we know?

Because thousands of Zero To Mastery graduates have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start learning Next.js today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Start learning now

What you'll build

The best way you learn is by doing. Not just watching endless tutorials. That's why a key part of this course is the real-world projects that you'll get to build. Plus they'll look great on your portfolio.

Coffee Connoisseur

Coffee Connoisseur

You will learn about static rendering in detail and how to choose what to statically render. You will make API requests to Foursquare and render those using SSG for this project.

NextFlix

NextFlix

Netflix Clone application using React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel + more. This is a full-stack app that you will deploy to production.

start learning now

Course curriculum

To make sure this course is a good fit for you, you can start learning Next.js for free right now by clicking any of the PREVIEW links below.

Introduction

5 lectures

Complete Next.js Developer: Zero to Mastery2:32

PREVIEW

Next.js Course Outline5:30

PREVIEW

Exercise: Meet Your Classmates and Instructor

BEGIN

Complete Course Projects + Resources

BEGIN

How-to's: Speed up videos, Downloading videos, Subtitles

BEGIN

Next.js Fundamentals (including React)

11 lectures

Section Overview2:07

PREVIEW

What is Next.js?1:52

PREVIEW

Optional: Learn React Fundamentals

PREVIEW

Benefits of Next.js and Different Rendering Techniques4:38

PREVIEW

Performance with Next.js6:26

PREVIEW

Image Component in Next.js4:13

BEGIN

File Based Routing and SEO6:11

BEGIN

Serverless Functions in Next.js4:35

BEGIN

Next.js vs Create React App6:11

BEGIN

Web Developer Monthly

BEGIN

Unlimited Updates

BEGIN

Project #1: Build Your First Next.js App | Coffee Connoisseur

19 lectures

Project overview: What are we building?1:59

BEGIN

Github Projects and Resources

BEGIN

Create a Next.js app: Zero Config7:17

BEGIN

How To Upgrade Your Next.js Version11:56

BEGIN

Exercise: Upgrade Next.js Version to Next.js 12

BEGIN

Quick Note: Next.js Versions

BEGIN

Upgrade to Next.js 123:39

BEGIN

Next.js Version Breaking Changes6:01

BEGIN

Features of Next.js 1213:38

BEGIN

Next.js setup project walkthrough8:24

BEGIN

_app.js Exercise with Footer

BEGIN

_app.js Solution with Footer4:12

BEGIN

What is Fast Refresh?3:32

BEGIN

What are CSS modules?7:48

BEGIN

Let's get ready for Home Page1:36

BEGIN

App background5:10

BEGIN

Banner Component6:44

BEGIN

Mobile First Development & Banner Component Styling7:06

BEGIN

Next.js Head Component2:47

BEGIN

Project #1: Routing with Next.js

7 lectures

Routing in Next.js4:35

BEGIN

Add routing for Coffee Store Page4:04

BEGIN

What is Dynamic Routing?7:23

BEGIN

Add route using Link component8:25

BEGIN

Add routes to Dynamic Pages with Link Component1:46

BEGIN

Exercise: Routing

BEGIN

Solution: Routing7:31

BEGIN

Project #1: Styling in Next.js

12 lectures

Style our homepage5:02

BEGIN

Hero Image Generator2:59

BEGIN

Add Hero Component0:50

BEGIN

Next.js Image component4:19

BEGIN

Hero Image on Home Page2:33

BEGIN

Exercise: Hero Image and Button Layout

BEGIN

Solution: Hero Image and Button Layout

BEGIN

Setup fonts in Next.js1:52

BEGIN

Load fonts on the page3:00

BEGIN

Document in Next.js6:44

BEGIN

Apply fonts in Document5:57

BEGIN

Quick Note: Fonts in Next.js

BEGIN

Hydration, SEO and Different Rendering Techniques in Next.js

10 lectures

What is SEO?7:48

BEGIN

Pre-rendering in Next.js5:43

BEGIN

Plain React vs Next.js app4:17

BEGIN

Different Rendering Techniques in Next.js2:09

BEGIN

How Pre-rendering helps with Performance4:41

BEGIN

Static Site Generation (SSG) in Next.js5:16

BEGIN

Incremental Static Regeneration (ISG) in Next.js6:29

BEGIN

Quick Note: Incremental Static Regeneration

BEGIN

Serverside Rendering (SSR) in Next.js4:38

BEGIN

Client Side Rendering (CSR) in Next.js3:39

BEGIN

Project #1: Static Coffee Store Pages

44 lectures

Project Component Architecture2:54

BEGIN

Card Component Structure6:02

BEGIN

Card Component Styling7:28

BEGIN

Grid Layout For Card Component6:05

BEGIN

Coffee Stores data

BEGIN

React Strict and Coffee Stores Rendering Twice

BEGIN

Add Coffee Stores on Page4:43

BEGIN

Next.js: next.config.js Use Unsplash Image4:28

BEGIN

What to Pre-render in Coffee Connoisseur App2:55

BEGIN

Default Pre-rendering in Next.js1:45

BEGIN

Implement Static Site Generation (SSG)6:57

BEGIN

Characteristics of Get Static Props in Next.js6:45

BEGIN

Coffee Stores Heading7:00

BEGIN

Get Static Paths in Next.js3:57

BEGIN

Characteristics of Get Static Paths in Next.js2:14

BEGIN

Implement Get Static Props and Get Static Paths in Next.js7:58

BEGIN

Fallback in Next.js9:23

BEGIN

Fallback: false with 404 Page2:05

BEGIN

Fallback: true9:40

BEGIN

Refactor Coffee Store Page5:29

BEGIN

Coffee Store Page Styling7:36

BEGIN

Coffee Store Page Styling (continued)9:36

BEGIN

Setup Foursquare Account6:01

BEGIN

Foursquare Places API3:55

BEGIN

Rate Limiting2:25

BEGIN

Foursquare Places API Playground3:24

BEGIN

Foursquare API in Get Static Props2:06

BEGIN

Fetch API Async Await7:33

BEGIN

Env Local vs Env Next.config.js3:59

BEGIN

Environment Variables in Next.js2:11

BEGIN

Coffee Stores Library5:40

BEGIN

Update Foursquare API in Get Static Paths4:19

BEGIN

Update Coffee Store Library Data3:31

BEGIN

Important Note: Unsplash API Account

BEGIN

Setup Unsplash API6:46

BEGIN

Invoke Unsplash API for Coffee Store Images - Part 13:19

BEGIN

Invoke Unsplash API for Coffee Store Images - Part 22:33

BEGIN

Update Coffee Store Library with Images2:37

BEGIN

Quick Note: Unsplash API perPage should be 30

BEGIN

Display Coffee Store Images in the Card5:52

BEGIN

Exercise: Display all coffee store images

BEGIN

Solution: Display all coffee store images

BEGIN

Individual Coffee Store Page data5:32

BEGIN

Update Styling for the App1:57

BEGIN

Project #1: Coffee Stores by Location

17 lectures

Section Overview1:28

BEGIN

Geolocation API Docs4:32

BEGIN

Using React Hooks1:18

BEGIN

Create React Hook for Retrieving User Location6:19

BEGIN

Use the hook for Retrieving User Location10:19

BEGIN

Quick Note: useEffect in Function

BEGIN

Client Side Rendering (CSR) Coffee Stores9:23

BEGIN

Display Coffee Stores by Location on the Page4:55

BEGIN

Refresh the Dynamic Route (Non-static)4:02

BEGIN

Fallback in Next.js3:39

BEGIN

Use React Context and Why to Use Context?4:09

BEGIN

Create Store Context5:17

BEGIN

Create Store Reducer in Context7:53

BEGIN

Store Coffee Stores in Store Context8:51

BEGIN

Coffee Store Page with Context3:31

BEGIN

Coffee Store Page for Non-SSG Routes6:35

BEGIN

Refactor Coffee Store App4:30

BEGIN

Project #1: Serverless Functions

10 lectures

What are API's?7:49

BEGIN

What are Serverless Functions?6:24

BEGIN

API routing with Next.js2:28

BEGIN

Hello World API route4:39

BEGIN

Exercise: Create a Serverless Function

BEGIN

Solution: Create a Serverless Function

BEGIN

Catch All Routes in Next.js5:32

BEGIN

Create a Serverless Function for Getting Coffee Stores8:39

BEGIN

Invoke Serverless Function: Get Coffee Stores5:37

BEGIN

Serverless Functions inside Get Static Props3:16

BEGIN

Project #1: Data Storage Using Airtable

18 lectures

Project Architecture7:25

BEGIN

What is Airtable?4:25

BEGIN

Setup Airtable8:21

BEGIN

API Architecture: Coffee Store Page5:41

BEGIN

Airtable Library7:08

BEGIN

Basic Coffee Store API / Serverless function6:50

BEGIN

API Design: Create Coffee Store7:21

BEGIN

Find Coffee Store API5:28

BEGIN

Transform Coffee Store Data5:13

BEGIN

Airtable Docs: Create Coffee Store9:05

BEGIN

Airtable Docs: Create Coffee Store (continued)5:03

BEGIN

API Error Handling5:59

BEGIN

Refactor Create Coffee Store API9:14

BEGIN

API Architecture: Invoke API on Coffee Store Page4:29

BEGIN

Important Note: Coffee Stores are created twice and React Strict Mode

BEGIN

Invoke Coffee Store API once user navigates9:56

BEGIN

Create Coffee Store for Statically Generated Route5:33

BEGIN

Exercise: Imposter Syndrome2:55

BEGIN

Project #1: SWR with Client Side Rendering

18 lectures

SWR Design3:33

BEGIN

Voting Feature Design4:09

BEGIN

Coffee Store By Id API7:15

BEGIN

Coffee Store By Id API Validation5:59

BEGIN

Refactor Coffee Store By Id API8:57

BEGIN

What is SWR? (State While Revalidate)7:02

BEGIN

Important Note: Latest SWR Version: Breaking Changes

BEGIN

SWR Docs Fetch API0:51

BEGIN

Use SWR on the Coffee Store Page8:58

BEGIN

API Design: Favourite Coffee Store By Id API6:14

BEGIN

Airtable Docs: Favourite Coffee Store By Id API6:50

BEGIN

Favourite Coffee Store By Id API9:29

BEGIN

Favourite Coffee Store By Id API (continued)7:51

BEGIN

Favourite Coffee Store By Id API wrap8:16

BEGIN

Invoke Favourite Coffee Store By Id API5:19

BEGIN

Application Demo5:44

BEGIN

Airtable Final Demo3:05

BEGIN

Refactor and Cleanup4:19

BEGIN

Project #1: Deployment and Build Optimization

20 lectures

What is Deployment?4:49

BEGIN

Important Note: Running Next Build

BEGIN

Running Your Application Next Build8:55

BEGIN

Cloud Ready Application5:42

BEGIN

Setting up Github Repository1:14

BEGIN

Create a Github Repository and Push Your Code6:06

BEGIN

Important: Coffee stores appear from different location on Vercel

BEGIN

Deployment to Vercel10:19

BEGIN

Quick Note: Environment Variables

BEGIN

Vercel Dashboard Walkthrough2:44

BEGIN

Vercel Production Build Files4:59

BEGIN

What is Netlify?6:00

BEGIN

Netlify Deployment10:37

BEGIN

Quick Note: Netlify Plugin Updates

BEGIN

Netlify Deployment Configuration Changes9:33

BEGIN

Lighthouse Performance4:31

BEGIN

Quick Note: Lighthouse Score

BEGIN

Lighthouse Performance and SEO Report9:16

BEGIN

Exercise: Lighthouse Improvements

BEGIN

Quick Note: Lighthouse Performance

BEGIN

Master Project: Project Setup | Netflix with Next.js

6 lectures

Project Overview5:54

BEGIN

Github Projects and Resources

BEGIN

Setting Up Our Master Project3:07

BEGIN

Setup Fonts3:48

BEGIN

Add Font to _Document5:02

BEGIN

Global App Styling7:56

BEGIN

Master Project: Netflix Home Page and Video

37 lectures

Netflix Component Architecture4:27

BEGIN

Banner Component3:49

BEGIN

Banner Component Structure9:35

BEGIN

Banner Component Button With Font8:25

BEGIN

Icons with Google Fonts4:02

BEGIN

NavBar Component Structure7:27

BEGIN

NavBar Component Styling8:54

BEGIN

NavBar Router8:54

BEGIN

NavBar Dropdown4:56

BEGIN

NavBar Logo Icons7:02

BEGIN

Card Component Architecture2:19

BEGIN

Card Component Structure6:09

BEGIN

Card Component Size8:34

BEGIN

Card Component Error Handling9:32

BEGIN

Card Component Image Error4:00

BEGIN

Framer Motion with Card4:15

BEGIN

Implement Framer Motion with Card8:35

BEGIN

Section Cards Architecture1:17

BEGIN

Section Cards Structure6:43

BEGIN

Section Cards Styling5:15

BEGIN

Card Scaling Feature8:13

BEGIN

Refactor Section Cards Component8:04

BEGIN

Youtube API Overview2:25

BEGIN

Which Youtube API To Use?6:35

BEGIN

Implement Youtube Search API6:26

BEGIN

Implement Youtube Search API (continued)4:59

BEGIN

Data Fetching Technique: Server Side Rendering6:17

BEGIN

Serverside Rendering (SSR) Rules in Next.js2:48

BEGIN

Implement Serverside Rendering (SSR) to Fetch Videos6:34

BEGIN

Youtube API: Google Console Project7:04

BEGIN

Invoke Youtube API7:30

BEGIN

Exercise: Youtube API Query

BEGIN

Solution: Youtube API Query

BEGIN

Implement More Sections For Videos5:44

BEGIN

Error Handling for Video Library6:29

BEGIN

Popular Videos API Docs8:46

BEGIN

Implement Popular Videos6:17

BEGIN

Master Project: Authentication with Magic | Netflix with Next.js

26 lectures

Section Overview2:28

BEGIN

What is Passwordless Authentication?4:58

BEGIN

Overview of Sign-in Page3:43

BEGIN

Setup of Sign-in Page5:39

BEGIN

Quick Note: EsLint Error

BEGIN

Sign-in Header Component3:55

BEGIN

Sign-in Page Structure5:58

BEGIN

Sign-in Page Styling7:13

BEGIN

Sign-in Form Validation9:23

BEGIN

Sign-in Routing To Dashboard7:18

BEGIN

What is Magic Links?8:57

BEGIN

Setup Magic Account6:55

BEGIN

Install Magic in App3:45

BEGIN

Magic API Keys6:35

BEGIN

Magic SDK (continued)2:57

BEGIN

Magic Docs For Login4:33

BEGIN

Magic Implementation8:12

BEGIN

Magic SDK Storage and Routing4:30

BEGIN

Magic Loading State5:58

BEGIN

Routing Delay with Login6:53

BEGIN

Quick Note: Next.js Warning: useEffect with async

BEGIN

Username on NavBar9:17

BEGIN

SignOut a User8:45

BEGIN

App Route once LoggedIn7:12

BEGIN

Routing Flicker with Login6:14

BEGIN

Loading Component4:22

BEGIN

Master Project: Incremental Static Regeneration | Netflix with Next.js

29 lectures

Project Architecture3:49

BEGIN

What Are We Building and Video Id Page Route4:25

BEGIN

Create Dynamic Route: Video Id Page3:37

BEGIN

Link Dynamic Page to Card Component Routing4:25

BEGIN

Connect Link Component2:53

BEGIN

Exercise: Link Component

BEGIN

Solution: Link Component

BEGIN

Connect Banner Component3:54

BEGIN

React Modal Docs2:56

BEGIN

Install React Modal Component8:33

BEGIN

Quick Note: Modal onRequestClose stopped working after applying styling

BEGIN

Modal Component Styles1:44

BEGIN

Implement Youtube API Player & Docs8:32

BEGIN

Youtube Player Styling4:17

BEGIN

Modal Component Structure9:21

BEGIN

Modal Styling3:13

BEGIN

Which Data Fetching Techniques To Use?7:43

BEGIN

What is Incremental Static Regeneration?7:05

BEGIN

Incremental Static Regeneration Fallback4:27

BEGIN

ISR (Incremental Static Regeneration) Demo and Next Steps3:18

BEGIN

Incremental Static Regeneration (ISR) Docs4:49

BEGIN

Implement Incremental Static Regeneration (ISR)7:25

BEGIN

Incremental Static Regeneration with Youtube API Docs5:19

BEGIN

Architectural Diagram1:16

BEGIN

Youtube API by ID10:24

BEGIN

Fix Link Component Route2:24

BEGIN

ISR Query Params5:41

BEGIN

Navbar Component4:39

BEGIN

YouTube Quota Limit: Test Data8:50

BEGIN

Master Project: Hasura GraphQL | Netflix with Next.js

20 lectures

Section Overview4:15

BEGIN

Why GraphQL?7:33

BEGIN

What is GraphQL?6:53

BEGIN

GraphQL Example4:57

BEGIN

GQL Query vs Mutation5:45

BEGIN

What is Hasura?5:49

BEGIN

Hasura API Explorer7:32

BEGIN

Hasura Dashboard and Signup5:54

BEGIN

Hasura Create PostGres DB5:27

BEGIN

Hasura DB Architecture7:22

BEGIN

Hasura DB Architecture (continued)6:23

BEGIN

Setup DB6:37

BEGIN

Hasura Try Out Tables5:09

BEGIN

Query Live Hasura Server6:40

BEGIN

Query Live Hasura Server with Environment Variables5:45

BEGIN

Hasura User Roles7:35

BEGIN

User Roles: Why JWT (JSON Web Tokens)5:17

BEGIN

What is JWT (JSON Web Token)6:52

BEGIN

JWT (JSON Web Token) Secret6:39

BEGIN

Create JWT Secret and Update Roles7:24

BEGIN

Master Project: Authentication with Hasura | Netflix with Next.js

21 lectures

Section Overview2:28

BEGIN

Authentication Architecture5:32

BEGIN

Quick Note: How to use Postman?

BEGIN

Login API5:18

BEGIN

Login API Architecture6:07

BEGIN

Login API Create Auth Header5:02

BEGIN

Login API Magic Server Side SDK6:24

BEGIN

Login API Magic Server Side SDK Testing5:47

BEGIN

Login API JWT (JSON Web Token) Docs4:37

BEGIN

Important Note: Users array is Empty and JWT content in HASURA

BEGIN

Login API Create JWT (JSON Web Token)8:14

BEGIN

Login API Hasura Check New User5:38

BEGIN

Login API Check New User Query9:36

BEGIN

Login API Refactor7:23

BEGIN

Login API New User Hasura Dashboard4:07

BEGIN

Login API Create New User Mutation10:31

BEGIN

Login API Overview and Cookie5:27

BEGIN

Login API Set Token Cookie8:02

BEGIN

Login API Set Token Cookie Testing4:02

BEGIN

Login API Cleanup2:13

BEGIN

Invoke Login API on Login9:15

BEGIN

Master Project: Ratings Service and My List Page | Netflix with Next.js

46 lectures

Section Overview1:53

BEGIN

App Architecture5:20

BEGIN

Like and Dislike Button Functionality9:36

BEGIN

Like and Dislike Button Styling2:04

BEGIN

Like and Dislike Button States8:46

BEGIN

Stats Rating API Architecture4:35

BEGIN

Stats API Creation3:55

BEGIN

Build Stats with Request Cookies9:25

BEGIN

Stats API Overview with JWT Verification4:00

BEGIN

Stats API JWT Verification3:10

BEGIN

Stats API Design GraphQL4:20

BEGIN

Stats API Design Find User By ID3:42

BEGIN

Find User By Id GraphQL9:34

BEGIN

Use Query String For Video ID3:15

BEGIN

Conditional Logic Does Video Exist?3:36

BEGIN

GraphiQL: Insert and Update Mutation8:23

BEGIN

Stats API Use Insert and Update Mutation10:47

BEGIN

Stats API Testing4:39

BEGIN

Insert And Update Mutation Implementation7:08

BEGIN

Stats API Wrap9:14

BEGIN

Overview of Like Dislike Functionality1:09

BEGIN

Like Dislike Functionality10:07

BEGIN

Like Dislike Functionality Testing3:25

BEGIN

Stats API Design: GET Request3:26

BEGIN

Tweak Stats API GET Request5:04

BEGIN

Stats API Refactor6:17

BEGIN

Invoke Stats API on Frontend9:14

BEGIN

Watch It Again Architecture4:46

BEGIN

Watch it Again Query Hasura6:49

BEGIN

Watch it Again Call in SSR (ServerSide Rendering)6:09

BEGIN

Render Watch it Again Section on Page6:46

BEGIN

High Resolution Images in the App5:14

BEGIN

Cookies inside SSR (ServerSide Rendering)5:34

BEGIN

Redirects in SSR (ServerSide Rendering)9:23

BEGIN

Create Redirect User Hook4:23

BEGIN

Testing the Redirect User Hook5:35

BEGIN

My List Page Architecture2:39

BEGIN

Build My List Page6:11

BEGIN

Styling My List Page2:39

BEGIN

Hasura Query for My List Page4:56

BEGIN

Server Side Render My List Page7:12

BEGIN

Wrap Cards in My List Page8:46

BEGIN

Logout Assignment6:00

BEGIN

Logout Solution

BEGIN

Exercise: SSR Redirects

BEGIN

Solution: SSR Redirects

BEGIN

NextJS 12: The New Features

6 lectures

NextJS 12: Middleware Introduction6:17

BEGIN

Important Note: Creating Middleware

BEGIN

Important Note: Middleware Updates

BEGIN

NextJS 12: Middleware Lets Try it Out6:08

BEGIN

NextJS 12: Middleware Implementation Continued9:17

BEGIN

Important Note: > Next.js 12.2 Cookies

BEGIN

Master Project: Deployment | Netflix with Next.js

7 lectures

How To Make Cloud Ready App5:48

BEGIN

Create Github Repo6:55

BEGIN

Application Cleanup3:25

BEGIN

Deployment To Vercel7:34

BEGIN

Try The App On Vercel8:07

BEGIN

Application Testing on Vercel3:37

BEGIN

Run Production Next Build6:37

BEGIN

Where To Go From Here?

6 lectures

Thank You!1:17

BEGIN

Review This Course!

BEGIN

Learning Guideline

BEGIN

LinkedIn Endorsements

BEGIN

Become An Alumni

BEGIN

Coding Challenges

BEGIN

Appendix: Learning React

38 lectures

Introduction To React.js12:21

BEGIN

Create React App7:08

BEGIN

React App Folder Structure8:14

BEGIN

React 18 Update4:48

BEGIN

React Fundamentals3:55

BEGIN

React Fundamentals 24:59

BEGIN

Class vs Functional App.js4:02

BEGIN

Hooks vs Classes2:13

BEGIN

Quick Note: Service Worker File

BEGIN

Your First React Component20:13

BEGIN

Building A React App 116:03

BEGIN

React.Fragment and Semantic HTML

BEGIN

Exercise: Learn to Read the Docs

BEGIN

Building A React App 29:47

BEGIN

Building A React App 326:35

BEGIN

Styling Your React App4:59

BEGIN

Quick Note: JSON Placeholder

BEGIN

Building A React App 415:30

BEGIN

Building A React App 58:53

BEGIN

Building A React App 69:05

BEGIN

Project Files

BEGIN

Keeping Your Projects Up To Date8:30

BEGIN

Exercise: React 18

BEGIN

Solution: Try Upgrading to React 183:56

BEGIN

React Review2:34

BEGIN

Error Boundary In React8:11

BEGIN

Deploying Our React App5:10

BEGIN

React Hooks3:42

BEGIN

React Hooks 23:47

BEGIN

React Hooks 33:25

BEGIN

React Hooks 44:01

BEGIN

React Hooks 53:45

BEGIN

React Hooks 66:54

BEGIN

React Hooks 79:16

BEGIN

React Hooks 84:48

BEGIN

Project Files - Hooks

BEGIN

React Hooks 95:58

BEGIN

Next Steps

BEGIN

Meet your instructors

Your Next.js instructors aren’t just experts with years of real-world professional experience. They have been in your shoes. They make learning fun. They make complex topics feel simple. They will motivate you. They will push you. And they go above and beyond to help you succeed.

Andrei Neagoie

Hi, I'm Andrei Neagoie!

Andrei, lead instructor of Zero To Mastery Academy, has taught 1,000,000+ students worldwide how to code and get hired. ZTM grads work for world-class companies like Apple, Google, Amazon, Tesla, IBM, Facebook, Shopify and many more.

SEE MY BIO & COURSES

Andrei Neagoie

Senior Software Developer

Ankita Kulkarni

Hi, I'm Ankita Kulkarni!

With over 10 years of experience as a Senior Software Engineer and leading Engineering teams, Ankita knows what works and what doesn't and is excited to teach you and help you succeed in your career.

SEE MY BIO & COURSES

Ankita Kulkarni

Senior Engineering Manager

Frequently asked questions

Are there any prerequisites for this course?

  • A computer (Windows, Mac, or Linux) with an internet connection
  • Basic HTML, CSS and JavaScript knowledge (which you can learn here)
  • You do not need any experience with React or any other JS framework. We even include introductory React lectures as an optional section!
  • A willingness and enthusiasm to learn and take action

Who is this course for?

  • Developers who want to learn and master NextJS
  • Students who want to go beyond all of the "beginner" Next.js tutorials out there
  • Programmers who want to learn one of the most in-demand skills of a Web Developer
  • Developers that want to be in the top 10% of NextJS Developers
  • Students who want to gain experience working on a large, scalable application
  • Bootcamp or online tutorial graduates that want to go beyond the basics
  • Students who want to learn from Senior Developers who are real-world industry experts, not just another online instructor that teaches off of documentation

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Can I download the videos?

Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun and accessible. Whether that’s on your commute, on a flight or just when you have limited access to good WiFi.

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Take the next step and invest in a better you

Choose your currency:
$ USD US Dollar
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now
Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$279 / year
$23 / month
You're committed to getting hired and starting a career in tech
Start Learning Now
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, workshops, and career paths
Invite to private Discord with 400,000+ members
Access to private Linkedin networking group
Custom ZTM course completion certificates
Download all lessons for offline learning
Unlimited, priority access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.