React developers
You can build React UIs, but you want a clear path to apps that feel “ready to ship.” This course helps you make that jump with Next.js as your production framework.
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!
Course Overview
About This Course
You already know React—but when it’s time to ship something that’s fast, SEO-friendly, and actually feels “production-ready,” plain React can start to feel like you’re assembling everything yourself. Routing, rendering strategy, backend endpoints, auth… it’s easy to get stuck deciding what goes where.
In this course, you’ll use Next.js 15 to close that gap with a framework built for real apps. You’ll see how the two routing approaches work (App Router and Pages Router) and follow a step-by-step path that mixes explanation with multiple real projects, so the concepts don’t stay abstract.
By the end, you’ll be able to create fullstack React apps where frontend and backend live in one project, choose the right rendering approach for each page, and confidently build features like data loading, form handling, and user sessions—ready to start your own Next.js projects or apply for Next.js roles.
What You'll Learn
You’ll work with Next.js 15 across both routing systems, including rendering, data workflows, and fullstack features that matter in real apps.
Build Next.js apps
Create Next.js projects from the ground up and understand how they’re structured, so you can start new apps confidently instead of copying boilerplates you don’t fully control.
Master file-based routing
Implement file-based routing with dynamic routes and catch-all routes, so you can model real navigation structures and handle complex URL patterns cleanly.
Choose rendering strategies
Apply page pre-rendering and server-side rendering (SSR), including pre-generating dynamic and static pages, so each route loads fast and stays SEO-ready.
Implement data workflows
Add data fetching and pre-fetching, and work with React Server Components and Client Components to build pages that balance interactivity with performance.
Handle submissions and uploads
Process form submissions via Server Actions and handle file uploads, so your apps can accept real user input and move data through the system reliably.
Ship fullstack features
Build fullstack functionality with API routes or Server Actions, add authentication (signup, sign-in, sessions), and manage app-wide state with React context inside Next.js apps.
Ready to get started?
See enrollment optionsPrerequisites
ReactJS knowledge is strongly recommended (a complete React refresher module is included if you need it).
No prior NextJS knowledge is required.
Who Is This Course For?
Fullstack-minded builders
You want to stop stitching together separate frontend and backend projects. You’ll be a fit if you want one codebase where UI and NodeJS-based backend logic work together.
Web developers
You’re aiming to work with a popular, in-demand stack and want a practical way to become job-ready with Next.js. This course is built to prepare you to start your own projects and apply for Next.js positions.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started21m
- 01Welcome To The Course!1:20 min
- 02What Is NextJS? Why Would You Use It?2:20 min
- 03Key Features & Benefits Of NextJS2:40 min
- 04Creating a First NextJS App4:25 min
- 05NextJS vs "Just React" - Analyzing The NextJS Project2:30 min
- 06Editing The First App2:21 min
- 07Pages Router vs App Router - One Framework, Two Approaches2:29 min
- 08How To Get The Most Out Of This Course3:05 min
- 09Learning Community & Course Resources0:00 min
- 10The Academind Pro Referral Program0:00 min
Optional: React Refresher3h 47m
- 01Using the Code Snasphots0:00 min
- 02Module Introduction1:08 min
- 03What Is React & Why Would You Use It?5:37 min
- 04React Projects - Requirements2:09 min
- 05Creating React Projects3:27 min
- 06Our Starting Project3:28 min
- 07Understanding How React Works7:46 min
- 08Building A First Custom Component11:15 min
- 09Outputting Dynamic Values5:03 min
- 10Reusing Components6:00 min
- 11Passing Data to Components with Props6:15 min
- 12CSS Styling & CSS Modules10:07 min
- 13Exercise & Another Component6:31 min
- 14Preparing the App For State Management3:46 min
- 15Adding Event Listeners7:52 min
- 16Working with State10:00 min
- 17Lifting State Up9:08 min
- 18The Special "children" Prop7:21 min
- 19State & Conditional Content8:59 min
- 20Adding a Shared Header & More State Management7:51 min
- 21Adding Form Buttons3:34 min
- 22Handling Form Submission6:18 min
- 23Updating State Based On Previous State5:30 min
- 24Outputting List Data6:39 min
- 25Adding a Backend to the React SPA6:10 min
- 26Sending a POST HTTP Request4:12 min
- 27Handling Side Effects with useEffect()9:06 min
- 28Handle Loading State4:23 min
- 29Understanding & Adding Routing3:55 min
- 30Adding Routes5:36 min
- 31Working with Layout Routes4:08 min
- 32Refactoring Route Components & More Nesting5:35 min
- 33Linking & Navigating8:09 min
- 34Data Fetching via loader()s9:07 min
- 35Submitting Data with action()s11:08 min
- 36Dynamic Routes8:41 min
- 37Module Summary1:25 min
NextJS Essentials (App Router)3h 52m
- 01Module Introduction1:20 min
- 02Starting Setup2:32 min
- 03Understanding File-based Routing & React Server Components2:45 min
- 04Adding Another Route via the File System3:06 min
- 05Navigating Between Pages - Wrong & Right Solution4:12 min
- 06Working with Pages & Layouts3:22 min
- 07Reserved File Names, Custom Components & How To Organize A NextJS Project6:31 min
- 08Reserved Filenames0:00 min
- 09Configuring Dynamic Routes & Using Route Parameters6:17 min
- 10Onwards to the Main Project: The Foodies App1:24 min
- 11Exercise: Your Task2:03 min
- 12Exercise: Solution8:19 min
- 13Revisiting The Concept Of Layouts3:50 min
- 14Adding a Custom Component To A Layout5:58 min
- 15Styling NextJS Project: Your Options & Using CSS Modules6:00 min
- 16Optimizing Images with the NextJS Image Component4:57 min
- 17Using More Custom Components3:48 min
- 18Populating The Starting Page Content4:18 min
- 19Preparing an Image Slideshow3:25 min
- 20React Server Components vs Client Components - When To Use What8:15 min
- 21Using Client Components Efficiently11:07 min
- 22Outputting Meals Data & Images With Unknown Dimensions10:31 min
- 23Setting Up A SQLite Database3:11 min
- 24Fetching Data By Leveraging NextJS & Fullstack Capabilities7:17 min
- 25Adding A Loading Page4:00 min
- 26Using Suspense & Streamed Responses For Granular Loading State Management5:54 min
- 27Handling Errors5:22 min
- 28Handling "Not Found" States1:57 min
- 29Loading & Rendering Meal Details via Dynamic Routes & Route Parameters11:04 min
- 30Throwing Not Found Errors For Individual Meals2:03 min
- 31Getting Started with the "Share Meal" Form1:53 min
- 32Adding an Image Preview to the Picker6:00 min
- 33Getting Started with a Custom Image Picker Input Component8:28 min
- 34Improving the Image Picker Component0:00 min
- 35Introducing & Using Server Actions for Handling Form Submissions9:02 min
- 36Storing Server Actions in Separate Files3:45 min
- 37Creating a Slug & Sanitizing User Input for XSS Protection3:20 min
- 38Storing Uploaded Images & Storing Data in the Database12:56 min
- 39Managing the Form Submission Status with useFormStatus5:30 min
- 40Adding Server-Side Input Validation5:54 min
- 41Working with Server Action Responses & useFormState8:05 min
- 42Building For Production & Understanding NextJS Caching6:06 min
- 43Triggering Cache Revalidations3:57 min
- 44Don't Store Files Locally On The Filesystem!2:13 min
- 45Bonus: Storing Uploaded Images In The Cloud (AWS S3)0:00 min
- 46Adding Static Metadata3:47 min
- 47Adding Dynamic Metadata2:20 min
- 48Module Summary4:25 min
Routing & Page Rendering - Deep Dive2h 2m
- 01Module Introduction1:37 min
- 02Project Setup, Overview & An Exercise!4:17 min
- 03Exercise Solution - Part 17:17 min
- 04Exercise Solution - Part 24:56 min
- 05App Styling & Using Dummy Data8:59 min
- 06Handling "Not Found" Errors & Showing "Not Found" Pages4:39 min
- 07Setting Up & Using Parallel Routes6:40 min
- 08Working with Parallel Routes & Nested Routes12:50 min
- 09Configuring Catch-All Routes6:01 min
- 10Catch-All Fallback Routes & Dealing With Multiple Path Segments9:21 min
- 11Throwing (Route-related) Errors3:38 min
- 12Handling Errors With Error Pages3:02 min
- 13Server vs Client Components10:10 min
- 14Nested Routes Inside Dynamic Routes4:56 min
- 15Intercepting Navigation & Using Interception Routes5:11 min
- 16Combining Parallel & Intercepting Routes7:42 min
- 17Navigating Programmatically2:42 min
- 18Using & Understanding Route Groups6:39 min
- 19Building APIs with Route Handlers5:15 min
- 20Using Middleware5:40 min
- 21Module Summary0:30 min
Data Fetching - Deep Dive54m
- 01Module Introduction0:56 min
- 02Adding a Backend2:46 min
- 03Option 1: Client-side Data Fetching8:50 min
- 04Option 2: Server-side Data Fetching5:36 min
- 05Why Use A Separate Backend? Fetching Directly From The Source!6:14 min
- 06Showing a "Loading" Fallback4:50 min
- 07Migrating An Entire Application To A Local Data Source (Database)13:19 min
- 08Granular Data Fetching With Suspense11:35 min
Mutating Data - Deep Dive1h 34m
- 01Module Introduction1:11 min
- 02Starting Project & Analyzing Mutation Options5:46 min
- 03Setting Up A Form Action9:19 min
- 04Creating a Server Action4:16 min
- 05Storing Data in Databases4:39 min
- 06Providing User Feedback with The useFormStatus Hook6:04 min
- 07Validating User Input With Help Of The useFormState Hook9:57 min
- 08Adjusting Server Actions for useFormState7:40 min
- 09Storing Server Actions In Separate Files3:57 min
- 10"use server" Does Not Guarantee Server-side Execution!0:00 min
- 11Uploading & Storing Images8:13 min
- 12Alternative Ways of Using, Configuring & Triggering Server Actions11:00 min
- 13Revalidating Data To Avoid Caching Problems4:45 min
- 14Performing Optimistic Updates With NextJS11:42 min
- 15Caching Differences: Development vs Production6:13 min
Understanding & Configuring Caching55m
- 01Module Introduction1:09 min
- 02Making Sense of NextJS' Caching Types6:39 min
- 03Project Setup1:45 min
- 04Handling Request Memoization5:31 min
- 05Understanding The Data Cache & Cache Settings7:31 min
- 06Controlling Data Caching5:27 min
- 07Making Sense Of The Full Route Cache4:42 min
- 08On-Demand Cache Invalidation with revalidatePath & revalidateTag6:03 min
- 09Setting Up Request Memoization For Custom Data Sources7:15 min
- 10Setting Up Data Caching For Custom Data Sources3:44 min
- 11Invalidating Custom Data Source Data3:32 min
- 12Module Summary1:44 min
NextJS App Optimizations53m
- 01Module Introduction3:08 min
- 02Using the NextJS Image Component3:43 min
- 03Understanding the NextJS Image Component5:15 min
- 04Controlling the Image Size4:45 min
- 05Working with Priority Images & More Settings3:03 min
- 06Loading Unknown Images4:12 min
- 07Configuring CSS For Images With The "fill" Prop3:03 min
- 08Using An Image Loader & Cloudinary Resizing15:51 min
- 09Page Metadata - An Introduction1:04 min
- 10Configuring Static Page Metadata2:57 min
- 11Configuring Dynamic Page Metadata5:03 min
- 12Understanding Layout Metadata1:38 min
And 15 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Next.js & React - The Complete Guide (incl. App Router)
One Payment. Lifetime Access.
$99one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime