Chod Matrix > Development > Web Development > Next.js 14 & React – The Complete Guide
4.69 out of 5
4.69
14557 reviews on Udemy

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!
Instructor:
Maximilian Schwarzmüller
94,069 students enrolled
English [CC] More
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

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 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 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! 🙂

Getting Started

1
Welcome To The Course!
2
What Is NextJS? Why Would You Use It?
3
Key Features & Benefits Of NextJS
4
Creating a First NextJS App
5
NextJS vs "Just React" - Analyzing The NextJS Project
6
Editing The First App
7
Pages Router vs App Router - One Framework, Two Approaches
8
How To Get The Most Out Of This Course
9
Learning Community & Course Resources

Optional: React Refresher

1
Using the Code Snasphots
2
Module Introduction
3
What Is React & Why Would You Use It?
4
React Projects - Requirements
5
Creating React Projects
6
Our Starting Project
7
Understanding How React Works
8
Building A First Custom Component
9
Outputting Dynamic Values
10
Reusing Components
11
Passing Data to Components with Props
12
CSS Styling & CSS Modules
13
Exercise & Another Component
14
Preparing the App For State Management
15
Adding Event Listeners
16
Working with State
17
Lifting State Up
18
The Special "children" Prop
19
State & Conditional Content
20
Adding a Shared Header & More State Management
21
Adding Form Buttons
22
Handling Form Submission
23
Updating State Based On Previous State
24
Outputting List Data
25
Adding a Backend to the React SPA
26
Sending a POST HTTP Request
27
Handling Side Effects with useEffect()
28
Handle Loading State
29
Understanding & Adding Routing
30
Adding Routes
31
Working with Layout Routes
32
Refactoring Route Components & More Nesting
33
Linking & Navigating
34
Data Fetching via loader()s
35
Submitting Data with action()s
36
Dynamic Routes
37
Module Summary
38
IMPORTANT -- LEGACY CONTENT BELOW
39
Module Introduction
40
What is ReactJS?
41
Why ReactJS & A First Demo
42
Building Single-Page Applications (SPAs)
43
React Alternatives
44
Creating a New React Project
45
Setting Up A Code Editor
46
React 18
47
Diving Into The Created Project
48
How React Works & Understanding Components
49
More Component Work & Styling With CSS Classes
50
Building & Re-using Components
51
Passing Data With Props & Dynamic Content
52
Handling Events
53
Adding More Components
54
Introducing State
55
Working with "Event Props"
56
Use The Right React Router Version
57
Adding Routing
58
Adding Links & Navigation
59
Scoping Component Styles With CSS Modules
60
Outputting Lists Of Data & Components
61
Adding Even More Components
62
Creating "Wrapper" Components
63
Working With Forms
64
Getting User Input & Handling Form Submission
65
Preparing The App For Http Requests & Adding a Backend
66
Sending a POST Http Request
67
Navigating Programmatically
68
Getting Started with Fetching Data
69
Using the "useEffect" Hook
70
Introducing React Context
71
Updating State Based On Previous State
72
Using Context In Components
73
More Context Usage
74
Module Summary
75
Module Resources

NextJS Essentials (App Router)

1
Module Introduction
2
Starting Setup
3
Understanding File-based Routing & React Server Components
4
Adding Another Route via the File System
5
Navigating Between Pages - Wrong & Right Solution
6
Working with Pages & Layouts
7
Reserved File Names, Custom Components & How To Organize A NextJS Project
8
Reserved Filenames
9
Configuring Dynamic Routes & Using Route Parameters
10
Onwards to the Main Project: The Foodies App
11
Exercise: Your Task
12
Exercise: Solution
13
Revisiting The Concept Of Layouts
You can view and review the lecture materials indefinitely, like an on-demand channel.
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!
4.7
4.7 out of 5
14557 Ratings

Detailed Rating

Stars 5
10441
Stars 4
3369
Stars 3
537
Stars 2
98
Stars 1
89
f868779eb2a98225b695f2467ac879de
Get course
Available in "ESSENTIAL LEARNER" plan Available in "PREMIUM SCHOLAR" plan

Includes

32 hours on-demand video
29 articles
1 lectures
Certificate of Completion