watch on aatventure.news

Next.js | Crash Course for Beginners 2021

Learn all about Next.js, React's most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course!

2021-05-19 19:00:00 - JavaScript Mastery

TIMESTAMPS:

00:00:00 - Welcome

00:00:46 - What is NextJS?

00:05:31 - Key Feature: Server-side (Pre-) Rendering of Pages

00:12:09 - Key Feature: File-based Routing

00:15:22 - Key Feature: Build Fullstack Apps With Ease

00:17:12 - Creating a NextJS Project & IDE Setup

00:22:52 - Analyzing the Created Project

00:25:44 - Adding First Pages To The Project

00:31-50 - Adding Nested Pages / Paths

00:35:37 - Creating Dynamic Pages

00:39:13 - Extracting Dynamic Route Data

00:43:21 - Linking Between Pages

00:50:34 - Onwards To A Bigger Project!

00:54:07 - Preparing Our Project Pages

00:57:49 - Rendering A List Of (Dummy) Meetups

01:02:52 - Adding A Form For Adding Meetups

01:06:47 - The "_app.js" File & Wrapper Components

01:13:04 - Programmatic Navigation

01:16:51 - Adding Custom Components & Styling With CSS


Modules

01:26:51 - How NextJS Page Pre-Rendering Actually Works

01:32:43 - Introducing Data Fetching For Page Generation (getStaticProps) 

01:41:39 - More Static Site Generation (SSG) With getStaticProps 

01:47:23 - Exploring getServerSideProps

01:53:50 - Working With Dynamic Path Params In getStaticProps

01:59:04 - Dynamic Pages & getStaticProps & getStaticPaths

02:06:21 - Introducing API Routes

02:12:41 - Connecting & Querying a MongoDB Database

02:22:13 - Sending HTTP Requests To API Routes

02:29:02 - Getting Data From The Database (For PagePre-Rendering) 

02:36:12 - Getting Meetup Detail Data & Paths

02:45:53 - Adding "head" Metadata To Pages

02:55:12 - Deploying NextJS Projects

03:07:38 - Working With Fallback Pages & Re-Deploying 


03:11:52 - Summary

More Posts