Next.js & React - The Complete Guide (incl. Two Paths!)

5.0 /5

(2 Ratings)

Offered byUDEMY

Next.js & React - The Complete Guide (incl. Two Paths!)
at
UDEMY
Overview

Learn NextJS from the ground up and build production-ready, fullstack ReactJS apps with the NextJS framework

Duration	25 hours
Total fee	₹3,499
Mode of learning	Online
Credential	Certificate

Next.js & React - The Complete Guide (incl. Two Paths!)

Table of content

Overview
Highlights
Course Details
Curriculum
Faculty
+ 2 more items

Next.js & React - The Complete Guide (incl. Two Paths!)
at
UDEMY
Highlights

Earn a Certificate of completion from Udemy
Learn from 24 article
Get full lifetime access of the course material
Comes with 30 days money back guarantee

Next.js & React - The Complete Guide (incl. Two Paths!)
at
UDEMY
Course details

Skills you will learn

SEO CSS Routing

Who should do this course?

For React developers
For React developers who aim to build fullstack React apps
For Web developers in general,

What are the course deliverables?

Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing and authentication
Learn how to build client-side and fullstack ReactJS apps with NextJS
Build real projects and apply what you learned with hands-on projects and examples

More about this course

This bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS
In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well
We'll start at the very basics, no NextJS knowledge is required at all, and we'll then dive into all the core features that make up NextJS

Next.js & React - The Complete Guide (incl. Two Paths!)
at
UDEMY
Curriculum

Getting Started

What Is Next.js? And Why Would You Use It?

Key Feature: Server-side Page (Pre-)Rendering

Key Feature: File-based Routing

Key Feature: Build Fullstack React Apps!

Join Our Learning Community!

Creating a NextJS Project & Setting Up Our IDE

Analyzing The Created Project

A First Demo: NextJS In Action!

About This Course & Course Outline

Taking This Course: Your Two Options

How To Get The Most Out Of This Course

Optional: React Refresher

Module Introduction

What is ReactJS?

Why ReactJS & A First Demo

Building Single-Page Applications (SPAs)

React Alternatives

Creating a New React Project

Setting Up A Code Editor

React 18

Diving Into The Created Project

How React Works & Understanding Components

More Component Work & Styling With CSS Classes

Building & Re-using Components

Passing Data With Props & Dynamic Content

Handling Events

Adding More Components

Introducing State

Working with "Event Props"

Pages & File-based Routing

Module Introduction

Our Starting Setup

What Is "File-based Routing"? And Why Is It Helpful?

Adding A First Page

Adding a Named / Static Route File

Working with Nested Paths & Routes

Adding Dynamic Paths & Routes

Extracting Dynamic Path Segment Data (Dynamic Routes)

Building Nested Dynamic Routes & Paths

Adding Catch-All Routes

Navigating with the "Link" Component

Navigating To Dynamic Routes

Project time: Working with file based routing

Module Introduction

Planning The Project

Setting Up The Main Pages

Adding Dummy Data & Static Files

Adding Regular React Components

Adding More React Components & Connecting Components

Styling Components In Next.js Projects

Adding Buttons & Icons

Adding the "Event Detail" Page (Dynamic Route)

Adding a General Layout Wrapper Component

Working on the "All Events" Page

Adding a Filter Form for Filtering Events

Navigating to the "Filtered Events" Page Progammatically

Page Pre-rendering & Data Fetching

Module Introduction

The Problem With Traditional React Apps (and Data Fetching)

How NextJS Prepares & Pre-renders Pages

Introducing Static Generation with "getStaticProps"

NextJS Pre-renders By Default!

Adding "getStaticProps" To Pages

Running Server-side Code & Using the Filesystem

A Look Behind The Scenes

Utilizing Incremental Static Generation (ISR)

ISR: A Look Behind The Scenes

A Closer Look At "getStaticProps" & Configuration Options

Working With Dynamic Parameters

Introducing "getStaticPaths" For Dynamic Pages

Next.js & React - The Complete Guide (incl. Two Paths!)
at
UDEMY
Faculty details

Maximilian Schwarzmüller

Starting out at the age of 12 he never stopped learning new programming skills and languages. Early he started creating websites for friends and just for fun as well. Besides web development he also explored Python and other non-web-only languages.