Next.js 14 & React – The Complete Guide

Next.js 14 & React – The Complete Guide, available at $109.99, has an average rating of 4.71, with 471 lectures, based on 19121 reviews, and has 121795 subscribers.

You will learn about Learn how to build fullstack React apps with NextJS 14 & the App Router Build real projects and apply what you learned with hands-on projects and examples Learn about different ways of building NextJS app – App Router vs Pages Router Get started with React Server Components, Client Components, data fetching & more! Handle data submissions via Server Actions Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing and authentication Take the full course or the "NextJS Summary" module for a quickstart if you have limited time This course is ideal for individuals who are React developers who want to take the next step and build production-ready React apps or React developers who aim to build fullstack React apps or Web developers in general, who want to work with one of the most popular and in-demand tech stacks It is particularly useful for React developers who want to take the next step and build production-ready React apps or React developers who aim to build fullstack React apps or Web developers in general, who want to work with one of the most popular and in-demand tech stacks.

Enroll now: Next.js 14 & React – The Complete Guide

Summary

Title: Next.js 14 & React – The Complete Guide

Price: $109.99

Average Rating: 4.71

Number of Lectures: 471

Number of Published Lectures: 453

Number of Curriculum Items: 471

Number of Published Curriculum Objects: 453

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Learn how to build fullstack React apps with NextJS 14 & the App Router
Build real projects and apply what you learned with hands-on projects and examples
Learn about different ways of building NextJS app – App Router vs Pages Router
Get started with React Server Components, Client Components, data fetching & more!
Handle data submissions via Server Actions
Learn all key NextJS features like pre-rendering, SSR, data fetching, file-based routing and authentication
Take the full course or the "NextJS Summary" module for a quickstart if you have limited time

Who Should Attend

React developers who want to take the next step and build production-ready React apps
React developers who aim to build fullstack React apps
Web developers in general, who want to work with one of the most popular and in-demand tech stacks

Target Audiences

React developers who want to take the next step and build production-ready React apps
React developers who aim to build fullstack React apps
Web developers in general, who want to work with one of the most popular and in-demand tech stacks

Update December 2023:

Added a HUGE new section (incl. a completely new demo project) that covers NextJS 14 & the “App Router” in-depth!
Covers React Server Components, Server Actions & more
Covers file upload & storage on S3
Completely updated the “React Refresher” section
No prior NextJS knowledge is required – I’ll introduce you to what the “App Router” is in this course!

Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS!

This course covers both the NextJS “App Router” & the “Pages Router” – two different approaches for building fullstack apps with React! And, of course, you’ll learn what these two approaches are, why two different approaches exist and how each approach works!

I created the bestselling Udemy course on React, now I’m super excited to share this NextJS with you – an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js!

Next.js is the production-ready, fullstack-capable framework for ReactJS – the most popular JavaScript library you can learn these days!

Too many buzzwords for your taste?

Fair enough – but indeed, NextJS is a great choice for growing as a React developerand for taking your React apps to the next level!

Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!

In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It’s a breeze with NextJS!

Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.

This course will take you from NextJS beginner to advanced level in no time!

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. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

For this course, you’ll need basic React knowledge, though the course does come with a “React refresher” module in case it’s been some time since you last worked with React.

This course also includes a “NextJS Summary” module for the Pages router and a “NextJS Essentials” module for the App router – which allow you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take those summary modules (and skip the rest for now) to learn about all the core features in as little time as possible.

After finishing this course, you’ll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!

In detail, this course will cover:

What is NextJS? And why would you use it?
Why is just React (in many cases) not enough?
Creating NextJS projects from the ground up & understanding these projects
Working with file-based routing
Adding dynamic routes and catch-all routes
Implementing different forms of page pre-rendering and server-side rendering
Working with data and adding data fetching + pre-fetching to your apps
Handling form submissions with Server Actions
Handling File upload
Pre-generating dynamic and static pages
Adding optimizations like metadata to pages
Optimizing images with the NextJS Image component
Building fullstack apps with API routes or Server Actions
Managing app-wide state with React context (in NextJS apps)
Adding authentication to NextJS apps
Multiple complete apps where we’ll apply all these core concepts!
A complete React.js refresher module (so that we’re all on the same page)
A NextJS summary module so that you can refresh what you learned or just explore the core features quickly
And much more!

I can’t wait to start this journey together with you! 🙂

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome To The Course!

Lecture 2: What Is NextJS? Why Would You Use It?

Lecture 3: Key Features & Benefits Of NextJS

Lecture 4: Creating a First NextJS App

Lecture 5: NextJS vs "Just React" – Analyzing The NextJS Project

Lecture 6: Editing The First App

Lecture 7: Pages Router vs App Router – One Framework, Two Approaches

Lecture 8: How To Get The Most Out Of This Course

Lecture 9: Learning Community & Course Resources

Lecture 10: Course Setup

Chapter 2: Optional: React Refresher

Lecture 1: Using the Code Snasphots

Lecture 2: Module Introduction

Lecture 3: What Is React & Why Would You Use It?

Lecture 4: React Projects – Requirements

Lecture 5: Creating React Projects

Lecture 6: Our Starting Project

Lecture 7: Understanding How React Works

Lecture 8: Building A First Custom Component

Lecture 9: Outputting Dynamic Values

Lecture 10: Reusing Components

Lecture 11: Passing Data to Components with Props

Lecture 12: CSS Styling & CSS Modules

Lecture 13: Exercise & Another Component

Lecture 14: Preparing the App For State Management

Lecture 15: Adding Event Listeners

Lecture 16: Working with State

Lecture 17: Lifting State Up

Lecture 18: The Special "children" Prop

Lecture 19: State & Conditional Content

Lecture 20: Adding a Shared Header & More State Management

Lecture 21: Adding Form Buttons

Lecture 22: Handling Form Submission

Lecture 23: Updating State Based On Previous State

Lecture 24: Outputting List Data

Lecture 25: Adding a Backend to the React SPA

Lecture 26: Sending a POST HTTP Request

Lecture 27: Handling Side Effects with useEffect()

Lecture 28: Handle Loading State

Lecture 29: Understanding & Adding Routing

Lecture 30: Adding Routes

Lecture 31: Working with Layout Routes

Lecture 32: Refactoring Route Components & More Nesting

Lecture 33: Linking & Navigating

Lecture 34: Data Fetching via loader()s

Lecture 35: Submitting Data with action()s

Lecture 36: Dynamic Routes

Lecture 37: Module Summary

Lecture 38: IMPORTANT — LEGACY CONTENT BELOW

Lecture 39: Module Introduction

Lecture 40: What is ReactJS?

Lecture 41: Why ReactJS & A First Demo

Lecture 42: Building Single-Page Applications (SPAs)

Lecture 43: React Alternatives

Lecture 44: Creating a New React Project

Lecture 45: Setting Up A Code Editor

Lecture 46: React 18

Lecture 47: Diving Into The Created Project

Lecture 48: How React Works & Understanding Components

Lecture 49: More Component Work & Styling With CSS Classes

Lecture 50: Building & Re-using Components

Lecture 51: Passing Data With Props & Dynamic Content

Lecture 52: Handling Events

Lecture 53: Adding More Components

Lecture 54: Introducing State

Lecture 55: Working with "Event Props"

Lecture 56: Use The Right React Router Version

Lecture 57: Adding Routing

Lecture 58: Adding Links & Navigation

Lecture 59: Scoping Component Styles With CSS Modules

Lecture 60: Outputting Lists Of Data & Components

Lecture 61: Adding Even More Components

Lecture 62: Creating "Wrapper" Components

Lecture 63: Working With Forms

Lecture 64: Getting User Input & Handling Form Submission

Lecture 65: Preparing The App For Http Requests & Adding a Backend

Lecture 66: Sending a POST Http Request

Lecture 67: Navigating Programmatically

Lecture 68: Getting Started with Fetching Data

Lecture 69: Using the "useEffect" Hook

Lecture 70: Introducing React Context

Lecture 71: Updating State Based On Previous State

Lecture 72: Using Context In Components

Lecture 73: More Context Usage

Lecture 74: Module Summary

Lecture 75: Module Resources

Chapter 3: NextJS Essentials (App Router)

Lecture 1: Module Introduction

Lecture 2: Starting Setup

Lecture 3: Understanding File-based Routing & React Server Components

Lecture 4: Adding Another Route via the File System

Lecture 5: Navigating Between Pages – Wrong & Right Solution

Lecture 6: Working with Pages & Layouts

Lecture 7: Reserved File Names, Custom Components & How To Organize A NextJS Project

Lecture 8: Reserved Filenames

Lecture 9: Configuring Dynamic Routes & Using Route Parameters

Lecture 10: Onwards to the Main Project: The Foodies App

Lecture 11: Exercise: Your Task

Lecture 12: Exercise: Solution

Instructors

Maximilian Schwarzmüller
AWS certified, Professional Web Developer and Instructor

Rating Distribution

1 stars: 139 votes
2 stars: 125 votes
3 stars: 754 votes
4 stars: 4472 votes
5 stars: 13631 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu