Next.js & React - The Complete Guide (incl. App Router)

Learn NextJS from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!

30h+ Video
300+ Lectures
All Levels
Next.js & React - The Complete Guide (incl. App Router)

About This Course

Welcome to "Next.js - The Complete Guide"!

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

This course covers both the NextJS "App Router" & the "Pages Router" - two different approaches for building fullstack apps with React!

I created the bestselling Udemy course on React, now I'm super excited to share this Next.js course 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! NextJS is a great choice for growing as a React developer and for taking your React apps to the next level!

Why Learn Next.js?

NextJS is growing fast and therefore in high demand. 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!

What's in This Course?

This course will take you from NextJS beginner to advanced level in no time! We'll start at the very basics and dive into all the core features that make up NextJS.

Fullstack React Apps

Build fullstack React apps (frontend + backend code combined in one project) with ease. Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend.

Server-Side Rendering

Master different forms of page pre-rendering and server-side rendering. Pre-generate dynamic and static pages for optimal performance and SEO.

File-Based Routing

Work with file-based routing, dynamic routes and catch-all routes. Learn both the App Router and Pages Router approaches.

Authentication

NextJS simplifies authentication and makes user signup, sign in and session management very convenient. Learn to add auth to your apps!

In Detail, You'll Learn

This course covers everything you need to build production-ready Next.js applications with multiple real projects where all concepts are applied step-by-step.

Core Concepts

Master these essential NextJS skills:

  • What is NextJS & why would you use it?
  • Creating NextJS projects from the ground up
  • Working with file-based routing
  • Adding dynamic routes and catch-all routes
  • Page pre-rendering & server-side rendering
  • Working with data fetching & pre-fetching

Advanced Topics

Take your skills to the next level:

  • Handling form submissions with Server Actions
  • Handling file upload
  • Adding metadata & optimizations to pages
  • Optimizing images with the NextJS Image component
  • Building fullstack apps with API routes
  • Adding authentication to NextJS apps

Bonus: Summary Modules Included!

This course includes a "NextJS Summary" module for the Pages Router and a "NextJS Essentials" module for the App Router - allowing you to always come back and refresh your knowledge without going through the full course again. Or just take those summary modules to learn all core features in as little time as possible!

Multiple Complete Apps Included!

This course includes multiple complete apps where you'll apply all core concepts! After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions!

Basic React Knowledge Needed

⚛️ React Developers You'll need basic React knowledge to take this course - perfect for React devs ready to level up!
🔄 React Refresher Included The course includes a complete React.js refresher module in case it's been some time since you last worked with React
🚀 Ready to Go Pro? Take the next step as a React developer and build real, production-ready projects with Next.js!

See The Course In Action


Curriculum

  Getting Started
Available in days
days after you enroll
  Optional: React Refresher
Available in days
days after you enroll
  NextJS Essentials (App Router)
Available in days
days after you enroll
  Routing & Page Rendering - Deep Dive
Available in days
days after you enroll
  Data Fetching - Deep Dive
Available in days
days after you enroll
  Mutating Data - Deep Dive
Available in days
days after you enroll
  Understanding & Configuring Caching
Available in days
days after you enroll
  NextJS App Optimizations
Available in days
days after you enroll
  User Authentication
Available in days
days after you enroll
  Roundup & Next Steps
Available in days
days after you enroll
  Pages & File-based Routing
Available in days
days after you enroll
  Project Time: Working with File-based Routing
Available in days
days after you enroll
  Page Pre-Rendering & Data Fetching
Available in days
days after you enroll
  Project Time: Page Pre-rendering & Data Fetching
Available in days
days after you enroll
  Optimizing NextJS Apps
Available in days
days after you enroll
  Adding Backend Code with API Routes (Fullstack React)
Available in days
days after you enroll
  Project Time: API Routes
Available in days
days after you enroll
  Working with App-wide State (React Context)
Available in days
days after you enroll
  Complete App Example: Build a Full Blog A to Z
Available in days
days after you enroll
  Deploying NextJS Apps
Available in days
days after you enroll
  Adding Authentication
Available in days
days after you enroll
  Optional: NextJS Summary
Available in days
days after you enroll
  Course Roundup
Available in days
days after you enroll

Course Prerequisites

Here's what you need to get the most out of this course

Required
  • ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module!
Good News!
  • NO prior NextJS knowledge is required

All pre-requisites are covered by courses in our "Academind Pro" Membership.

Instructor Name

Your Instructor

Maximilian Schwarzmüller

Founder & Instructor

Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.

Join 8035 happy students!

Choose the plan that works best for you

Single-Course License

Full access to "Next.js & React - The Complete Guide (incl. App Router)"

$99 one-time

This is a one-time payment that grants access to this course only, not to any other courses.