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
