Next.Js 14 & React - The Complete Guide

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

What you'll 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

Requirements

ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module

NO prior NextJS knowledge is required

Description

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 & moreCovers file upload & storage on S3Completely updated the "React Refresher" sectionNo 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 developer and 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 projectsWorking with file-based routingAdding dynamic routes and catch-all routesImplementing different forms of page pre-rendering and server-side renderingWorking with data and adding data fetching + pre-fetching to your appsHandling form submissions with Server ActionsHandling File uploadPre-generating dynamic and static pagesAdding optimizations like metadata to pagesOptimizing images with the NextJS Image componentBuilding fullstack apps with API routes or Server ActionsManaging app-wide state with React context (in NextJS apps)Adding authentication to NextJS appsMultiple 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 quicklyAnd much more!I can't wait to start this journey together with you! :)

Overview

Section 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

Section 2: Optional: React Refresher

Lecture 10 Using the Code Snasphots

Lecture 11 Module Introduction

Lecture 12 What Is React & Why Would You Use It?

Lecture 13 React Projects - Requirements

Lecture 14 Creating React Projects

Lecture 15 Our Starting Project

Lecture 16 Understanding How React Works

Lecture 17 Building A First Custom Component

Lecture 18 Outputting Dynamic Values

Lecture 19 Reusing Components

Lecture 20 Passing Data to Components with Props

Lecture 21 CSS Styling & CSS Modules

Lecture 22 Exercise & Another Component

Lecture 23 Preparing the App For State Management

Lecture 24 Adding Event Listeners

Lecture 25 Working with State

Lecture 26 Lifting State Up

Lecture 27 The Special "children" Prop

Lecture 28 State & Conditional Content

Lecture 29 Adding a Shared Header & More State Management

Lecture 30 Adding Form Buttons

Lecture 31 Handling Form Submission

Lecture 32 Updating State Based On Previous State

Lecture 33 Outputting List Data

Lecture 34 Adding a Backend to the React SPA

Lecture 35 Sending a POST HTTP Request

Lecture 36 Handling Side Effects with useEffect()

Lecture 37 Handle Loading State

Lecture 38 Understanding & Adding Routing

Lecture 39 Adding Routes

Lecture 40 Working with Layout Routes

Lecture 41 Refactoring Route Components & More Nesting

Lecture 42 Linking & Navigating

Lecture 43 Data Fetching via loader()s

Lecture 44 Submitting Data with action()s

Lecture 45 Dynamic Routes

Lecture 46 Module Summary

Lecture 47 IMPORTANT – LEGACY CONTENT BELOW

Lecture 48 Module Introduction

Lecture 49 What is ReactJS?

Lecture 50 Why ReactJS & A First Demo

Lecture 51 Building Single-Page Applications (SPAs)

Lecture 52 React Alternatives

Lecture 53 Creating a New React Project

Lecture 54 Setting Up A Code Editor

Lecture 55 React 18

Lecture 56 Diving Into The Created Project

Lecture 57 How React Works & Understanding Components

Lecture 58 More Component Work & Styling With CSS Classes

Lecture 59 Building & Re-using Components

Lecture 60 Passing Data With Props & Dynamic Content

Lecture 61 Handling Events

Lecture 62 Adding More Components

Lecture 63 Introducing State

Lecture 64 Working with "Event Props"

Lecture 65 Use The Right React Router Version

Lecture 66 Adding Routing

Lecture 67 Adding Links & Navigation

Lecture 68 Scoping Component Styles With CSS Modules

Lecture 69 Outputting Lists Of Data & Components

Lecture 70 Adding Even More Components

Lecture 71 Creating "Wrapper" Components

Lecture 72 Working With Forms

Lecture 73 Getting User Input & Handling Form Submission

Lecture 74 Preparing The App For Http Requests & Adding a Backend

Lecture 75 Sending a POST Http Request

Lecture 76 Navigating Programmatically

Lecture 77 Getting Started with Fetching Data

Lecture 78 Using the "useEffect" Hook

Lecture 79 Introducing React Context

Lecture 80 Updating State Based On Previous State

Lecture 81 Using Context In Components

Lecture 82 More Context Usage

Lecture 83 Module Summary

Lecture 84 Module Resources

Section 3: NextJS Essentials (App Router)

Lecture 85 Module Introduction

Lecture 86 Starting Setup

Lecture 87 Understanding File-based Routing & React Server Components

Lecture 88 Adding Another Route via the File System

Lecture 89 Navigating Between Pages - Wrong & Right Solution

Lecture 90 Working with Pages & Layouts

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

Lecture 92 Reserved Filenames

Lecture 93 Configuring Dynamic Routes & Using Route Parameters

Lecture 94 Onwards to the Main Project: The Foodies App

Lecture 95 Exercise: Your Task

Lecture 96 Exercise: Solution

Lecture 97 Revisiting The Concept Of Layouts

Lecture 98 Adding a Custom Component To A Layout

Lecture 99 Styling NextJS Project: Your Options & Using CSS Modules

Lecture 100 Optimizing Images with the NextJS Image Component

Lecture 101 Using More Custom Components

Lecture 102 Populating The Starting Page Content

Lecture 103 Preparing an Image Slideshow

Lecture 104 React Server Components vs Client Components - When To Use What

Lecture 105 Using Client Components Efficiently

Lecture 106 Outputting Meals Data & Images With Unknown Dimensions

Lecture 107 Setting Up A SQLite Database

Lecture 108 Fetching Data By Leveraging NextJS & Fullstack Capabilities

Lecture 109 Adding A Loading Page

Lecture 110 Using Suspense & Streamed Responses For Granular Loading State Management

Lecture 111 Handling Errors

Lecture 112 Handling "Not Found" States

Lecture 113 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters

Lecture 114 Throwing Not Found Errors For Individual Meals

Lecture 115 Getting Started with the "Share Meal" Form

Lecture 116 Getting Started with a Custom Image Picker Input Component

Lecture 117 Adding an Image Preview to the Picker

Lecture 118 Improving the Image Picker Component

Lecture 119 Introducing & Using Server Actions for Handling Form Submissions

Lecture 120 Storing Server Actions in Separate Files

Lecture 121 Creating a Slug & Sanitizing User Input for XSS Protection

Lecture 122 Storing Uploaded Images & Storing Data in the Database

Lecture 123 Managing the Form Submission Status with useFormStatus

Lecture 124 Adding Server-Side Input Validation

Lecture 125 Working with Server Action Responses & useFormState

Lecture 126 Building For Production & Understanding NextJS Caching

Lecture 127 Triggering Cache Revalidations

Lecture 128 Don't Store Files Locally On The Filesystem!

Lecture 129 Bonus: Storing Uploaded Images In The Cloud (AWS S3)

Lecture 130 Adding Static Metadata

Lecture 131 Adding Dynamic Metadata

Lecture 132 Module Summary

Section 4: Pages & File-based Routing

Lecture 133 From App Router To Pages Router

Lecture 134 Using The Code Snapshots

Lecture 135 Module Introduction

Lecture 136 Our Starting Setup

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

Lecture 138 Adding A First Page

Lecture 139 Adding a Named / Static Route File

Lecture 140 Working with Nested Paths & Routes

Lecture 141 Adding Dynamic Paths & Routes

Lecture 142 Extracting Dynamic Path Segment Data (Dynamic Routes)

Lecture 143 Building Nested Dynamic Routes & Paths

Lecture 144 Adding Catch-All Routes

Lecture 145 Navigating with the "Link" Component

Lecture 146 Navigating To Dynamic Routes

Lecture 147 A Different Way Of Setting Link Hrefs

Lecture 148 Navigating Programmatically

Lecture 149 Adding a Custom 404 Page

Lecture 150 Module Summary

Lecture 151 Module Resources

Section 5: Project Time: Working with File-based Routing

Lecture 152 Module Introduction

Lecture 153 Planning The Project

Lecture 154 Setting Up The Main Pages

Lecture 155 Adding Dummy Data & Static Files

Lecture 156 Adding Regular React Components

Lecture 157 Adding More React Components & Connecting Components

Lecture 158 Styling Components In Next.js Projects

Lecture 159 & NextJS 13

Lecture 160 Adding Buttons & Icons

Lecture 161 Adding the "Event Detail" Page (Dynamic Route)

Lecture 162 Adding a General Layout Wrapper Component

Lecture 163 Working on the "All Events" Page

Lecture 164 Adding a Filter Form for Filtering Events

Lecture 165 Navigating to the "Filtered Events" Page Progammatically

Lecture 166 Extracting Data on the Catch-All Page

Lecture 167 Final Steps

Lecture 168 Module Summary

Lecture 169 Module Resources

Section 6: Page Pre-Rendering & Data Fetching

Lecture 170 Module Introduction

Lecture 171 The Problem With Traditional React Apps (and Data Fetching)

Lecture 172 How NextJS Prepares & Pre-renders Pages

Lecture 173 Introducing Static Generation with "getStaticProps"

Lecture 174 NextJS Pre-renders By Default!

Lecture 175 Adding "getStaticProps" To Pages

Lecture 176 Running Server-side Code & Using the Filesystem

Lecture 177 A Look Behind The Scenes

Lecture 178 Utilizing Incremental Static Generation (ISR)

Lecture 179 ISR: A Look Behind The Scenes

Lecture 180 A Closer Look At "getStaticProps" & Configuration Options

Lecture 181 Working With Dynamic Parameters

Lecture 182 Introducing "getStaticPaths" For Dynamic Pages

Lecture 183 Using "getStaticPaths"

Lecture 184 "getStaticPaths" & Link Prefetching: Behind The Scenes

Lecture 185 Working With Fallback Pages

Lecture 186 Loading Paths Dynamically

Lecture 187 Fallback Pages & "Not Found" Pages

Lecture 188 Introducing "getServerSideProps" for Server-side Rendering (SSR)

Lecture 189 Using "getServerSideProps" for Server-side Rendering

Lecture 190 "getServerSideProps" and its Context

Lecture 191 Dynamic Pages & "getServerSideProps"

Lecture 192 "getServerSideProps": Behind The Scenes

Lecture 193 Introducing Client-Side Data Fetching (And When To Use It)

Lecture 194 Implementing Client-Side Data Fetching

Lecture 195 A Note About useSWR

Lecture 196 Using the "useSWR" NextJS Hook

Lecture 197 Combining Pre-Fetching With Client-Side Fetching

Lecture 198 Module Summary

Lecture 199 Module Resources

Section 7: Project Time: Page Pre-rendering & Data Fetching

Lecture 200 Module Introduction

Lecture 201 Preparations

Lecture 202 Adding Static Site Generation (SSG) On The Home Page

Lecture 203 Loading Data & Paths For Dynamic Pages

Lecture 204 Optimizing Data Fetching

Lecture 205 Working on the "All Events" Page

Lecture 206 Using Server-side Rendering (SSR)

Lecture 207 Adding Client-Side Data Fetching

Lecture 208 Module Summary

Lecture 209 Module Resources

Section 8: Optimizing NextJS Apps

Lecture 210 Module Introduction

Lecture 211 Analyzing the Need for "head" Metadata

Lecture 212 Configuring the "head" Content

Lecture 213 Adding Dynamic "head" Content

Lecture 214 Reusing Logic Inside A Component

Lecture 215 Working with the "_app.js" File (and Why)

Lecture 216 Merging "head" Content

Lecture 217 The "_document.js" File (And What It Does)

Lecture 218 A Closer Look At Our Images

Lecture 219 Optimizing Images with the "Next Image" Component & Feature

Lecture 220 Taking A Look At The "Next Image" Documentation

Lecture 221 Module Summary

Lecture 222 Module Resources

Section 9: Adding Backend Code with API Routes (Fullstack React)

Lecture 223 Module Introduction

Lecture 224 What are "API Routes"?

Lecture 225 Writing Our First API Route

Lecture 226 Preparing the Frontend Form

Lecture 227 Parsing The Incoming Request & Executing Server-side Code

Lecture 228 Sending Requests To API Routes

Lecture 229 Using API Routes To Get Data

Lecture 230 Using API Routes For Pre-Rendering Pages

Lecture 231 Creating & Using Dynamic API Routes

Lecture 232 Exploring Different Ways Of Structuring API Route Files

Lecture 233 Module Summary

Lecture 234 Module Resources

Section 10: Project Time: API Routes

Lecture 235 Module Introduction

Lecture 236 Starting Setup & A Challenge For You!

Lecture 237 Adding a Newsletter Route

Lecture 238 Adding Comments API Routes

Lecture 239 Connecting the Frontend To the Comments API Routes

Lecture 240 Setting Up A MongoDB Database

Lecture 241 Running MongoDB Queries From Inside API Routes

Lecture 242 Inserting Comments Into The Database

Lecture 243 Getting Data From The Database

Lecture 244 Adding Error Handling

Lecture 245 More Error Handling

Lecture 246 A Final Note On MongoDB Connections

Lecture 247 Module Summary

Lecture 248 Improvement: Getting Comments For A Specific Event

Lecture 249 Module Resources

Section 11: Working with App-wide State (React Context)

Lecture 250 Module Introduction

Lecture 251 Our Target State & Starting Project

Lecture 252 Creating a New React Context

Lecture 253 Adding Context State

Lecture 254 Using Context Data In Components

Lecture 255 Example: Triggering & Showing Notifications

Lecture 256 Example: Removing Notifications (Automatically)

Lecture 257 Challenge Solution

Lecture 258 Module Summary

Lecture 259 Module Resources

Section 12: Complete App Example: Build a Full Blog A to Z

Lecture 260 Module Introduction

Lecture 261 Setting Up The Core Pages

Lecture 262 Getting Started With The Home Page

Lecture 263 Adding The "Hero" Component

Lecture 264 Adding Layout & Navigation

Lecture 265 Time To Add Styling & A Logo

Lecture 266 Starting Work On The "Featured Posts" Part

Lecture 267 Adding A Post Grid & Post Items

Lecture 268 Rendering Dummy Post Data

Lecture 269 Adding the "All Posts" Page

Lecture 270 Working On The "Post Detail" Page

Lecture 271 Rendering Markdown As JSX

Lecture 272 Adding Markdown Files As A Data Source

Lecture 273 Adding Functions To Read & Fetch Data From Markdown Files

Lecture 274 Using Markdown Data For Rendering Posts

Lecture 275 Rendering Dynamic Post Pages & Paths

Lecture 276 Rendering Custom HTML Elements with React Markdown

Lecture 277 Rendering Images With The "Next Image" Component (From Markdown)

Lecture 278 Rendering Code Snippets From Markdown

Lecture 279 Preparing The Contact Form

Lecture 280 Adding The Contact API Route

Lecture 281 Sending Data From The Client To The API Route

Lecture 282 Storing Messages With MongoDB In A Database

Lecture 283 Adding UI Feedback With Notifications

Lecture 284 Adding "head" Data

Lecture 285 Adding A "_document.js" File

Lecture 286 Using React Portals

Lecture 287 Module Summary

Lecture 288 Module Resources

Section 13: Deploying NextJS Apps

Lecture 289 Module Introduction

Lecture 290 Building NextJS Apps: Your Options

Lecture 291 Key Deployment Steps

Lecture 292 Checking & Optimizing Our Code

Lecture 293 The NextJS Config File & Working With Environment Variables

Lecture 294 Running a Test Build & Reducing Code Size

Lecture 295 A Full Deployment Example (To Vercel)

Lecture 296 A Note On Github & Secret Credentials

Lecture 297 Using the "export" Feature

Lecture 298 Module Summary

Lecture 299 Module Resources

Section 14: Adding Authentication

Lecture 300 Module Introduction

Lecture 301 Our Starting Project

Lecture 302 How Does Authentication Work (In React & NextJS Apps)?

Lecture 303 Must Read: Install the Right next-auth Version

Lecture 304 Using The "next-auth" Library

Lecture 305 Adding A User Signup API Route

Lecture 306 Sending Signup Requests From The Frontend

Lecture 307 Improving Signup With Unique Email Addresses

Lecture 308 Adding the "Credentials Auth Provider" & User Login Logic

Lecture 309 Sending a "Signin" Request From The Frontend

Lecture 310 Managing Active Session (On The Frontend)

Lecture 311 Adding User Logout

Lecture 312 Adding Client-Side Page Guards (Route Protection)

Lecture 313 Adding Server-Side Page Guards (And When To Use Which Approach)

Lecture 314 Protecting the "Auth" Page

Lecture 315 Using the "next-auth" Session Provider Component

Lecture 316 Analyzing Further Authentication Requirements

Lecture 317 Protecting API Routes

Lecture 318 Adding the "Change Password" Logic

Lecture 319 Sending a "Change Password" Request From The Frontend

Lecture 320 Module Summary & Final Steps

Lecture 321 Module Resources

Section 15: Optional: NextJS Summary

Lecture 322 Module Introduction

Lecture 323 What is NextJS?

Lecture 324 Key Feature: Server-side (Pre-) Rendering of Pages

Lecture 325 Key Feature: File-based Routing

Lecture 326 Key Feature: Build Fullstack Apps With Ease

Lecture 327 Creating a NextJS Project & IDE Setup

Lecture 328 About the "App Router"

Lecture 329 Analyzing the Created Project

Lecture 330 Adding First Pages To The Project

Lecture 331 Adding Nested Pages / Paths

Lecture 332 Creating Dynamic Pages

Lecture 333 Extracting Dynamic Route Data

Lecture 334 Linking Between Pages

Lecture 335 Onwards To A Bigger Project!

Lecture 336 Preparing Our Project Pages

Lecture 337 Rendering A List Of (Dummy) Meetups

Lecture 338 Adding A Form For Adding Meetups

Lecture 339 The "_app.js" File & Wrapper Components

Lecture 340 Programmatic Navigation

Lecture 341 Adding Custom Components & Styling With CSS Modules

Lecture 342 How NextJS Page Pre-Rendering Actually Works

Lecture 343 Introducing Data Fetching For Page Generation (getStaticProps)

Lecture 344 More Static Site Generation (SSG) With getStaticProps

Lecture 345 Exploring getServerSideProps

Lecture 346 Working With Dynamic Path Params In getStaticProps

Lecture 347 Dynamic Pages & getStaticProps & getStaticPaths

Lecture 348 Introducing API Routes

Lecture 349 Connecting & Querying a MongoDB Database

Lecture 350 Sending HTTP Requests To API Routes

Lecture 351 Getting Data From The Database (For Page Pre-Rendering)

Lecture 352 Getting Meetup Detail Data & Paths

Lecture 353 Adding "head" Metadata To Pages

Lecture 354 Deploying NextJS Projects

Lecture 355 Working With Fallback Pages & Re-Deploying

Lecture 356 Module Summary

Lecture 357 Module Resources

Section 16: Course Roundup

Lecture 358 Course Roundup

Lecture 359 Bonus!

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