Play all

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

Description:

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

Academind

Add to list

#Programming #Programming Languages #Javascript #React #Next.js #Web Development #Databases #NoSQL Databases #MongoDB #Full Stack Development #Server-Side Rendering

0:00 / 0:00