Complete NextJS Developer: Zero to Mastery

Course Guide + Code

For more courses, resources and workshop, visit https://zerotomastery.io
Github Repositories:
● Github Repo for Discover Videos (NextFlix)
● Github Repo for Discover Coffee Stores (Coffee Connoisseur)

Apps we will deploy:

● https://discovery-coffee-stores.vercel.app/
● https://discover-coffee-stores.netlify.app/
● https://discover-videos.vercel.app/

Master project #1: Build your first Next.js app | Coffee Connoisseur

Create a Next.js app: Zero Config

● NPX Node.js Package Runner
● Yarn Package Manager
● NPM
● Node.js Download
● Next.js Docs Getting Started

_app.js Solution with Footer

● Footer MDN

What is Fast Refresh?

● Fast Refresh

What are CSS modules?

● CSS Modules

App background
● https://meshgradient.com/
● Unique Mesh Gradient Used

Mobile First Development & Banner Component Styling

● https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/
● CSS Variables

Next.js Head Component

● Next Head
● Head MetaData

Master project #1: Routing with Next.js | Coffee Connoisseur

Routing in Next.js
● https://nextjs.org/docs/routing/introduction
 ● https://developer.mozilla.org/en-US/docs/Web/API/History_API
● https://reactrouter.com/

What is Dynamic Routing

● https://nextjs.org/docs/routing/dynamic-routes

Add route using Link Component

● https://nextjs.org/docs/api-reference/next/link
● https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Master Project #1: Styling in Next.js

Next.js Image component

● https://nextjs.org/docs/api-reference/next/image
● https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Setup Fonts
● https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm+plex+sans

Load Fonts on the page

● https://nextjs.org/docs/basic-features/font-optimization

Document in Next.js
● https://nextjs.org/docs/advanced-features/custom-document

Hydration, SEO and Different Rendering Techniques in Next.js

Plain React vs Next.js app

● CodeSandbox Next.js App:
https://codesandbox.io/s/nextjs-app-nostalgic-northcutt-p9vkz
● CodeSandbox React App:
https://codesandbox.io/s/reactapp-goofy-dijkstra-luy9k-luy9k

How Pre-rendering helps with Performance

● https://web.dev/content-delivery-networks/

Client Side Rendering (CSR) in Next.js

● https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-sid
e
Project #1: Static Coffee Store Pages
Card Component Styling
● https://hype4.academy/tools/glassmorphism-generator
● https://github.com/kulkarniankita/discovery-coffee-stores/blob/main/components/c
ard.module.css
● https://github.com/JedWatson/classnames

Grid Layout For Card Component

● https://github.com/kulkarniankita/discovery-coffee-stores/blob/main/styles/Home.m
odule.css
● https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Next.js: next.config.js Use Unsplash Image

● https://nextjs.org/docs/api-reference/next.config.js/introduction

Default Pre-rendering in Next.js

● https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generatio
n

Implement Static Site Generation (SSG)

● https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generatio
n

Characteristics of Get Static Props in Next.js

● https://next-code-elimination.vercel.app/

Get Static Paths in Next.js

● https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generatio
n

Fallback: true
● https://nextjs.org/docs/basic-features/data-fetching#fallback-true

Coffee Store Page Styling

● https://github.com/kulkarniankita/discovery-coffee-stores/blob/main/styles/coffee-st
ore.module.css
● https://fonts.google.com/icons

Setup Foursquare Account

● https://developer.foursquare.com/
● https://developer.foursquare.com/docs/places-api-getting-started
● V2: https://developer.foursquare.com/reference/rate-limits-v2
 ● Latest Version: https://developer.foursquare.com/reference/rate-limits
Foursquare Places API Playground
● V2: https://developer.foursquare.com/reference/v2-venues-search
● Latest Version: https://developer.foursquare.com/reference/places-nearby
● https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
● https://developer.foursquare.com/reference/versioning
● V2: https://developer.foursquare.com/reference/authentication-v2

Foursquare Places API

● V2: https://developer.foursquare.com/reference/v2-venues-search
● Latest Version: https://developer.foursquare.com/reference/places-nearby

Fetch API Async Await

● https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Environment Variables in Next.js

● https://nextjs.org/docs/basic-features/environment-variables

Setup Unsplash API

● https://unsplash.com/

Invoke Unsplash API for Coffee Store Images

● https://unsplash.com/developers
● https://unsplash.com/documentation#search-photos

Update Coffee Store Library with Images

● https://github.com/unsplash/unsplash-js

Project #1: Coffee Stores by Location

Geolocation API Docs

● https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Using React Hooks

● https://reactjs.org/docs/hooks-intro.html

Client Side Rendering (CSR) Coffee Stores

● https://nextjs.org/docs/basic-features/environment-variables#exposing-environment
-variables-to-the-browser

Use React Context and Why to Use Context?

● https://reactjs.org/docs/context.html
Create Store Reducer in Context
● https://reactjs.org/docs/hooks-reference.html#usereducer

Project #1: Serverless Functions

What are API's?

● https://nextjs.org/docs/api-routes/introduction

Hello World API route

● https://nodejs.org/api/http.html#class-httpserverresponse
● https://nodejs.org/api/http.html#class-httpincomingmessage

Create a Serverless Function for Getting Coffee Stores

● https://vercel.com/docs/runtimes#official-runtimes/node-js

Serverless Functions inside Get Static Props

● https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly

Project #1: Data Storage Using Airtable

What is Airtable
● https://airtable.com/

Airtable Library
● https://github.com/airtable/airtable.js/
● https://airtable.com/api

Basic Coffee Store API / Serverless function

● Postman: https://www.postman.com/downloads/

API Error Handling

● https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
● https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Project #1: SWR with Client Side Rendering

What is SWR? (State While Revalidate)

● https://swr.vercel.app/

SWR Docs Fetch API

● https://swr.vercel.app/docs/data-fetching

Project #1: Deployment and Build Optimization

Running Your Application Next Build

 ● https://nextjs.org/docs/deployment

Setting up Github Repository

● https://github.com/

Deployment to Vercel
● https://nextjs.org/docs/deployment
● https://vercel.com/dashboard

What is Netlify?
● https://www.netlify.com/
● https://www.netlify.com/with/nextjs

Netlify Deployment
● https://docs.netlify.com/configure-builds/common-configurations/next-js/

Lighthouse Performance
● https://web.dev/measure/

Master Project: Project Setup | Netflix with Next.js

Setting Up Our Master Project

● https://nextjs.org/docs/getting-started

Setup Fonts
● https://fonts.google.com/specimen/Roboto+Slab?query=roboto+slab
● https://nextjs.org/docs/advanced-features/custom-document

Add Font to _Document

● https://nextjs.org/docs/advanced-features/custom-document

Global App Styling

● https://github.com/kulkarniankita/discover-videos/blob/main/styles/globals.css

Master Project: Netflix Home Page and Video

Banner Component Structure

● https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Banner Component Button With Font

● https://fonts.google.com/specimen/Roboto+Slab
Icons with Google Fonts
● https://fonts.google.com/icons
● https://nextjs.org/docs/api-reference/next/image

NavBar Component Styling

● https://github.com/kulkarniankita/discover-videos/blob/main/components/nav/navb
ar.module.css

NavBar Router
● https://nextjs.org/docs/api-reference/next/router

NavBar Logo Icons

● https://fonts.google.com/icons?icon.query=expand+more

Card Component Structure

● https://nextjs.org/docs/api-reference/next/image

Card Component Size

● https://github.com/kulkarniankita/discover-videos/blob/main/components/card/card
.module.css

Card Component Image Error

● https://unsplash.com/photos/CiUR8zISX60

Framer Motion with Card

● https://www.framer.com/docs/animation/

Implement Framer Motion with Card Component

● https://github.com/JedWatson/classnames
● https://www.framer.com/docs/gestures/#hover

Section Cards Styling

● https://github.com/kulkarniankita/discover-videos/blob/main/components/card/secti
on-cards.module.css

Card Scaling Feature

● https://github.com/kulkarniankita/discover-videos/blob/main/components/card/secti
on-cards.module.css

Youtube API Overview

● https://developers.google.com/youtube
● https://developers.google.com/youtube/v3/docs/search/list?hl=en
Implement Youtube Search API
● https://github.com/kulkarniankita/discover-videos/blob/main/data/videos.json
● https://developers.google.com/youtube/v3/docs/search/list?hl=en

Data Fetching Technique: Server Side Rendering

● https://nextjs.org/docs/basic-features/pages#server-side-rendering

Serverside Rendering (SSR) Rules in Next.js

● https://nextjs.org/docs/basic-features/pages#server-side-rendering

Youtube API: Google Console Project

● https://developers.google.com/youtube/v3/getting-started
● https://nextjs.org/docs/basic-features/environment-variables

Error Handling for Video Library

● https://developers.google.com/youtube/v3/docs/search/list?hl=en#errors

Popular Videos API Docs

● https://developers.google.com/youtube/v3/docs/videos/list

Implement Popular Videos

● https://github.com/kulkarniankita/discover-videos/blob/main/styles/Home.module.c
ss#L5-L7

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

What is Passwordless Authentication?

● https://magic.link/
● https://magic.link/docs/introduction/what-is-magic#why-passwordless
● https://haveibeenpwned.com/

Sign-in Header Component

● https://github.com/kulkarniankita/discover-videos/blob/main/styles/Login.module.cs
s

Sign-in Page Styling

● https://github.com/kulkarniankita/discover-videos/blob/main/styles/Login.module.cs
s

What is Magic Links?

● https://magic.link/docs/introduction/decentralized-id
Setup Magic Account
 ● https://magic.link/docs/home
● https://magic.link/docs/login-methods/email/integration/web
● https://magic.link/docs/api-reference/client-side-sdks/web

Install Magic in App

● https://magic.link/docs/login-methods/email/integration/web

Magic SDK (continued)

● https://nextjs.org/docs/basic-features/environment-variables#exposing-environment
-variables-to-the-browser

Magic Docs For Login

● https://magic.link/docs/api-reference/client-side-sdks/web

Magic Implementation
● https://magic.link/docs/api-reference/client-side-sdks/web#loginwithmagiclink

Magic SDK Storage and Routing

● https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Routing Delay with Login

● https://nextjs.org/docs/api-reference/next/router#routerevents

SignOut a User
● https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-
that-wraps-an-a-tag

Loading Component
● https://projects.lukehaas.me/css-loaders/

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

Create Dynamic Route: Video Id Page

● https://nextjs.org/docs/routing/dynamic-routes
● https://nextjs.org/docs/api-reference/next/link#if-the-route-has-dynamic-segments

Connect Banner Component

● https://nextjs.org/docs/api-reference/next/router#userouter

React Modal Docs

● https://www.npmjs.com/package/react-modal
● https://reactcommunity.org/react-modal/accessibility/
● https://reactcommunity.org/react-modal/
Modal Component Styles
● https://github.com/kulkarniankita/discover-videos/blob/main/styles/Video.module.cs
s

Implement Youtube API Player & Docs

● https://developers.google.com/youtube/player_parameters#Parameters

What is Incremental Static Regeneration?

● https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

YouTube Quota Limit: Test Data

● https://developers.google.com/youtube/v3/getting-started#quota

Master Project: Hasura GraphQL | Netflix with Next.js

Why GraphQL
● https://developers.google.com/youtube/v3/docs/search/list

What is GraphQL
● https://graphql.org/

GraphQL Example
● https://api.spacex.land/graphql/

GraphQL Query vs Mutation

● https://graphql.org/learn/queries/

What is Hasura
● https://hasura.io/

Hasura Create PostGres DB

● https://hasura.io/pricing/

Hasura DB Architecture
● https://magic.link/docs/api-reference/client-side-sdks/web#getmetadata

Query Live Hasura Server with Environment Variables

● https://nextjs.org/docs/basic-features/environment-variables#exposing-environment
-variables-to-the-browser
User Roles: Why JWT (JSON Web Tokens)
 ● https://hasura.io/docs/latest/graphql/core/auth/authorization/common-roles-auth-ex
amples.html

What is JWT?
● https://jwt.io/

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

Login API Magic Server Side SDK

● https://magic.link/docs/api-reference/server-side-sdks/node

Login API JWT (JSON Web Token) Docs

● https://www.npmjs.com/package/jsonwebtoken

Login API Overview and Cookie

● https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
● https://www.npmjs.com/package/cookie

Login API Set Token Cookie Testing

● https://developer.mozilla.org/en-US/docs/Glossary/Response_header

Master Project: Ratings Service | Netflix with Next.js

Like and Dislike Button Styling

● https://github.com/kulkarniankita/discover-videos/blob/main/styles/Video.module.cs
s#L114-L137
● https://github.com/kulkarniankita/discover-videos/tree/main/components/icons

Stats API Overview with JWT Verification

● https://github.com/auth0/node-jsonwebtoken#jwtverifytoken-secretorpublickey-opti
ons-callback
● https://jwt.io/

GraphiQL: Insert and Update Mutation

● https://hasura.io/docs/latest/graphql/core/databases/postgres/mutations/update.ht
ml#increment-decrement-int-columns

High Resolution Images in the App

● https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumb
nail-from-the-youtube-api
Cookies inside SSR (ServerSide Rendering)
● https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side
-rendering

Next.js 12: The New Features

NextJS 12: Middleware Introduction

● https://nextjs.org/docs/middleware

NextJS 12: Middleware Lets Try it Out

● https://nextjs.org/docs/middleware#execution-order
● https://nextjs.org/docs/api-reference/next/server#nextmiddleware

NextJS 12: Middleware Implementation Continued

● https://nextjs.org/docs/api-reference/next/server#nextresponse

Master Project: Deployment | Netflix with Next.js

Create Github Repo

● https://github.com/new

Deployment To Vercel
● https://vercel.com/dashboard

Run Production Next Build

● https://nextjs.org/docs/deployment

Professional Local Setup

Node.js install
● https://nodejs.org/en/

Install Node.js and Manage multiple Node.js versions

● https://nodejs.org/en/download/
● https://github.com/nvm-sh/nvm/blob/master/README.md

Install Visual Code

● https://code.visualstudio.com/

Postman
● https://www.postman.com/downloads/
For more courses, resources and workshop, visit https://zerotomastery.io