Next.js 14 & 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!
Watch Promo Enroll in Course
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!
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! :)
30+
hours
300+
lessons
Course Curriculum
-
StartWelcome To The Course! (1:20)
-
StartWhat Is NextJS? Why Would You Use It? (2:20)
-
StartKey Features & Benefits Of NextJS (2:40)
-
StartCreating a First NextJS App (4:25)
-
StartNextJS vs "Just React" - Analyzing The NextJS Project (2:30)
-
StartEditing The First App (2:21)
-
StartPages Router vs App Router - One Framework, Two Approaches (2:29)
-
StartHow To Get The Most Out Of This Course (3:05)
-
StartLearning Community & Course Resources
-
StartThe Academind Pro Referral Program
-
StartUsing the Code Snasphots
-
StartModule Introduction (1:08)
-
StartWhat Is React & Why Would You Use It? (5:37)
-
StartReact Projects - Requirements (2:09)
-
StartCreating React Projects (3:27)
-
StartOur Starting Project (3:28)
-
StartUnderstanding How React Works (7:46)
-
StartBuilding A First Custom Component (11:15)
-
StartOutputting Dynamic Values (5:03)
-
StartReusing Components (6:00)
-
StartPassing Data to Components with Props (6:15)
-
StartCSS Styling & CSS Modules (10:07)
-
StartExercise & Another Component (6:31)
-
StartPreparing the App For State Management (3:46)
-
StartAdding Event Listeners (7:52)
-
StartWorking with State (10:00)
-
StartLifting State Up (9:08)
-
StartThe Special "children" Prop (7:21)
-
StartState & Conditional Content (8:59)
-
StartAdding a Shared Header & More State Management (7:51)
-
StartAdding Form Buttons (3:34)
-
StartHandling Form Submission (6:18)
-
StartUpdating State Based On Previous State (5:30)
-
StartOutputting List Data (6:39)
-
StartAdding a Backend to the React SPA (6:10)
-
StartSending a POST HTTP Request (4:12)
-
StartHandling Side Effects with useEffect() (9:06)
-
StartHandle Loading State (4:23)
-
StartUnderstanding & Adding Routing (3:55)
-
StartAdding Routes (5:36)
-
StartWorking with Layout Routes (4:08)
-
StartRefactoring Route Components & More Nesting (5:35)
-
StartLinking & Navigating (8:09)
-
StartData Fetching via loader()s (9:07)
-
StartSubmitting Data with action()s (11:08)
-
StartDynamic Routes (8:41)
-
StartModule Summary (1:25)
-
StartModule Introduction (1:20)
-
StartStarting Setup (2:32)
-
StartUnderstanding File-based Routing & React Server Components (2:45)
-
StartAdding Another Route via the File System (3:06)
-
StartNavigating Between Pages - Wrong & Right Solution (4:12)
-
StartWorking with Pages & Layouts (3:22)
-
StartReserved File Names, Custom Components & How To Organize A NextJS Project (6:31)
-
StartReserved Filenames
-
StartConfiguring Dynamic Routes & Using Route Parameters (6:17)
-
StartOnwards to the Main Project: The Foodies App (1:24)
-
StartExercise: Your Task (2:03)
-
StartExercise: Solution (8:19)
-
StartRevisiting The Concept Of Layouts (3:50)
-
StartAdding a Custom Component To A Layout (5:58)
-
StartStyling NextJS Project: Your Options & Using CSS Modules (6:00)
-
StartOptimizing Images with the NextJS Image Component (4:57)
-
StartUsing More Custom Components (3:48)
-
StartPopulating The Starting Page Content (4:18)
-
StartPreparing an Image Slideshow (3:25)
-
StartReact Server Components vs Client Components - When To Use What (8:15)
-
StartUsing Client Components Efficiently (11:07)
-
StartOutputting Meals Data & Images With Unknown Dimensions (10:31)
-
StartSetting Up A SQLite Database (3:11)
-
StartFetching Data By Leveraging NextJS & Fullstack Capabilities (7:17)
-
StartAdding A Loading Page (4:00)
-
StartUsing Suspense & Streamed Responses For Granular Loading State Management (5:54)
-
StartHandling Errors (5:22)
-
StartHandling "Not Found" States (1:57)
-
StartLoading & Rendering Meal Details via Dynamic Routes & Route Parameters (11:04)
-
StartThrowing Not Found Errors For Individual Meals (2:03)
-
StartGetting Started with the "Share Meal" Form (1:53)
-
StartAdding an Image Preview to the Picker (6:00)
-
StartGetting Started with a Custom Image Picker Input Component (8:28)
-
StartImproving the Image Picker Component
-
StartIntroducing & Using Server Actions for Handling Form Submissions (9:02)
-
StartStoring Server Actions in Separate Files (3:45)
-
StartCreating a Slug & Sanitizing User Input for XSS Protection (3:20)
-
StartStoring Uploaded Images & Storing Data in the Database (12:56)
-
StartManaging the Form Submission Status with useFormStatus (5:30)
-
StartAdding Server-Side Input Validation (5:54)
-
StartWorking with Server Action Responses & useFormState (8:05)
-
StartBuilding For Production & Understanding NextJS Caching (6:06)
-
StartTriggering Cache Revalidations (3:57)
-
StartDon't Store Files Locally On The Filesystem! (2:13)
-
StartBonus: Storing Uploaded Images In The Cloud (AWS S3)
-
StartAdding Static Metadata (3:47)
-
StartAdding Dynamic Metadata (2:20)
-
StartModule Summary (4:25)
Course Prerequisites
ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module!
NO prior NextJS knowledge is required
All pre-requisites are covered by courses in our "Academind Pro" Membership.
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
Join 7794 happy students!
Single-Course License
Full access to "Next.js 14 & React - The Complete Guide (incl. App Router)"
$99
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
$25/month
Cancel Anytime!
This is a recurring payment, charged automatically on a monthly basis. You can cancel anytime from inside your user profile to avoid being charged again once your billing cycle ends. For more information, please contact Academind.