Next.js Crash Course for Beginners - Learn NextJS from Scratch

This beginner tutorial introduces Next.js as a production and full-stack framework for React. Learners build a meetup application with routing, pre-rendering, data fetching, API routes, MongoDB, metadata, and deployment.

Syllabus

Welcome
What is NextJS?
Key Feature: Server-side Pre- Rendering of Pages
Key Feature: File-based Routing
Key Feature: Build Fullstack Apps With Ease
Creating a NextJS Project & IDE Setup
Analyzing the Created Project
Adding First Pages To The Project
Adding Nested Pages / Paths
Creating Dynamic Pages
Extracting Dynamic Route Data
Linking Between Pages
Onwards To A Bigger Project!
Preparing Our Project Pages
Rendering A List Of Dummy Meetups
Adding A Form For Adding Meetups
The "_app.js" File & Wrapper Components
Programmatic Navigation
Adding Custom Components & Styling With CSS
How NextJS Page Pre-Rendering Actually Works
getStaticProps
More Static Site Generation SSG With getStaticProps
Exploring getServerSideProps
Working With Dynamic Path Params In getStaticProps
Dynamic Pages & getStaticProps & getStaticPaths
Introducing API Routes
Connecting & Querying a MongoDB Database
Sending HTTP Requests To API Routes
Pre-Rendering
Getting Meetup Detail Data & Paths
Adding "head" Metadata To Pages
Deploying NextJS Projects
Working With Fallback Pages & Re-Deploying
Summary