Dive into a comprehensive 3-hour tutorial on Next.js, the popular production framework for React. Master key concepts like server-side rendering, file-based routing, and fullstack app development. Create a Next.js project, build dynamic pages, implement programmatic navigation, and style with CSS modules. Explore data fetching techniques, including getStaticProps and getServerSideProps, for efficient page generation. Learn to work with API routes, connect to MongoDB, and handle HTTP requests. Gain practical experience by building a meetup application, adding metadata, and deploying your Next.js project. Perfect for beginners, this hands-on course covers everything from basic setup to advanced features, preparing you to create powerful, production-ready React applications with Next.js.
Next.js Crash Course for Beginners - Learn NextJS from Scratch
Overview
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
Taught by
Academind
