Next.js 15 & React – The Complete Guide
-
Getting StartedWelcome To The Course!0sWhat Is NextJS? Why Would You Use It?0sKey Features & Benefits Of NextJS0sCreating a First NextJS App0sNextJS vs “Just React” – Analyzing The NextJS Project0sEditing The First App0sPages Router vs App Router – One Framework, Two Approaches0sHow To Get The Most Out Of This Course0sLearning Community & Course ResourcesCourse Setup
-
Optional React RefresherUsing the Code SnasphotsModule Introduction0sWhat Is React & Why Would You Use It?0sReact Projects – Requirements0sCreating React Projects0sOur Starting Project0sUnderstanding How React Works0sBuilding A First Custom Component0sOutputting Dynamic Values0sReusing Components0sPassing Data to Components with Props0sCSS Styling & CSS Modules0sExercise & Another Component0sPreparing the App For State Management0sAdding Event Listeners0sWorking with State0sLifting State Up0sThe Special “children” Prop0sState & Conditional Content0sAdding a Shared Header & More State Management0sAdding Form Buttons0sHandling Form Submission0sUpdating State Based On Previous State0sOutputting List Data0sAdding a Backend to the React SPA0sSending a POST HTTP Request0sHandling Side Effects with useEffect()0sHandle Loading State0sUnderstanding & Adding Routing0sAdding Routes0sWorking with Layout Routes0sRefactoring Route Components & More Nesting0sLinking & Navigating0sData Fetching via loader()s0sSubmitting Data with action()s0sDynamic Routes0sModule Summary0sIMPORTANT — LEGACY CONTENT BELOWModule Introduction0sWhat is ReactJS?0sWhy ReactJS & A First Demo0sBuilding Single-Page Applications (SPAs)0sReact Alternatives0sCreating a New React Project0sSetting Up A Code Editor0sReact 18Diving Into The Created Project0sHow React Works & Understanding Components0sMore Component Work & Styling With CSS Classes0sBuilding & Re-using Components0sPassing Data With Props & Dynamic Content0sHandling Events0sAdding More Components0sIntroducing State0sWorking with “Event Props”0sUse The Right React Router VersionAdding Routing0sAdding Links & Navigation0sScoping Component Styles With CSS Modules0sOutputting Lists Of Data & Components0sAdding Even More Components0sCreating “Wrapper” Components0sWorking With Forms0sGetting User Input & Handling Form Submission0sPreparing The App For Http Requests & Adding a Backend0sSending a POST Http Request0sNavigating Programmatically0sGetting Started with Fetching Data0sUsing the “useEffect” Hook0sIntroducing React Context0sUpdating State Based On Previous State0sUsing Context In Components0sMore Context Usage0sModule Summary0sModule Resources
-
NextJS Essentials (App Router)Module Introduction0sStarting Setup0sUnderstanding File-based Routing & React Server Components0sAdding Another Route via the File System0sNavigating Between Pages – Wrong & Right Solution0sWorking with Pages & Layouts0sReserved File Names, Custom Components & How To Organize A NextJS Project0sReserved FilenamesConfiguring Dynamic Routes & Using Route Parameters0sOnwards to the Main Project: The Foodies App0sExercise: Your Task0sExercise: Solution0sRevisiting The Concept Of Layouts0sAdding a Custom Component To A Layout0sStyling NextJS Project: Your Options & Using CSS Modules0sOptimizing Images with the NextJS Image Component0sUsing More Custom Components0sPopulating The Starting Page Content0sPreparing an Image Slideshow0sReact Server Components vs Client Components – When To Use What0sUsing Client Components Efficiently0sOutputting Meals Data & Images With Unknown Dimensions0sSetting Up A SQLite Database0sFetching Data By Leveraging NextJS & Fullstack Capabilities0sAdding A Loading Page0sUsing Suspense & Streamed Responses For Granular Loading State Management0sHandling Errors0sHandling “Not Found” States0sLoading & Rendering Meal Details via Dynamic Routes & Route Parameters0sThrowing Not Found Errors For Individual Meals0sGetting Started with the “Share Meal” Form0sGetting Started with a Custom Image Picker Input Component0sAdding an Image Preview to the Picker0sImproving the Image Picker ComponentIntroducing & Using Server Actions for Handling Form Submissions0sStoring Server Actions in Separate Files0sCreating a Slug & Sanitizing User Input for XSS Protection0sStoring Uploaded Images & Storing Data in the Database0sManaging the Form Submission Status with useFormStatus0sAdding Server-Side Input Validation0sUsing useFormState()Working with Server Action Responses & useFormState0sBuilding For Production & Understanding NextJS Caching0sTriggering Cache Revalidations0sDon’t Store Files Locally On The Filesystem!0sBonus: Storing Uploaded Images In The Cloud (AWS S3)Adding Static Metadata0sAdding Dynamic Metadata0sModule Summary0s
-
Routing & Page Rendering – Deep DiveModule Introduction0sProject Setup, Overview & An Exercise!0sExercise Solution – Part 10sExercise Solution – Part 20sApp Styling & Using Dummy Data0sHandling “Not Found” Errors & Showing “Not Found” Pages0sSetting Up & Using Parallel Routes0sWorking with Parallel Routes & Nested Routes0sConfiguring Catch-All Routes0sCatch-All Fallback Routes & Dealing With Multiple Path Segments0sThrowing (Route-related) Errors0sHandling Errors With Error Pages0sServer vs Client Components0sNested Routes Inside Dynamic Routes0sIntercepting Navigation & Using Interception Routes0sCombining Parallel & Intercepting Routes0sReplace page.js with default.jsNavigating Programmatically0sDefining the Base HTML DocumentUsing & Understanding Route Groups0sBuilding APIs with Route Handlers0sUsing Middleware0sModule Summary0s
-
Data Fetching – Deep DiveModule Introduction0sAdding a Backend0sOption 1: Client-side Data Fetching0sOption 2: Server-side Data Fetching0sWhy Use A Separate Backend? Fetching Directly From The Source!0sShowing a “Loading” Fallback0sMigrating An Entire Application To A Local Data Source (Database)0sGranular Data Fetching With Suspense0s
-
Mutating Data – Deep DiveModule Introduction0sStarting Project & Analyzing Mutation Options0sSetting Up A Form Action0sCreating a Server Action0sStoring Data in Databases0sProviding User Feedback with The useFormStatus Hook0sUsing useFormState HookValidating User Input With Help Of The useFormState Hook0sAdjusting Server Actions for useFormState0sStoring Server Actions In Separate Files0s“use server” Does Not Guarantee Server-side Execution!Uploading & Storing Images0sAlternative Ways of Using, Configuring & Triggering Server Actions0sRevalidating Data To Avoid Caching Problems0sPerforming Optimistic Updates With NextJS0sCaching Differences: Development vs Production0s
-
Understanding & Configuring CachingModule Introduction0sMaking Sense of NextJS’ Caching Types0sProject Setup0sHandling Request Memoization0sUnderstanding The Data Cache & Cache Settings0sControlling Data Caching0sMaking Sense Of The Full Route Cache0sOn-Demand Cache Invalidation with revalidatePath & revalidateTag0sSetting Up Request Memoization For Custom Data Sources0sSetting Up Data Caching For Custom Data Sources0sInvalidating Custom Data Source Data0sModule Summary0s
-
NextJS App OptimizationsModule Introduction0sUsing the NextJS Image Component0sUnderstanding the NextJS Image Component0sControlling the Image Size0sWorking with Priority Images & More Settings0sLoading Unknown Images0sConfiguring CSS For Images With The “fill” Prop0sUsing An Image Loader & Cloudinary Resizing0sPage Metadata – An Introduction0sConfiguring Static Page Metadata0sConfiguring Dynamic Page Metadata0sUnderstanding Layout Metadata0s
-
User AuthenticationModule Introduction0sProject Setup0sUser Signup: Extracting & Validating User Input0sStoring Users in a Database – The Wrong Way0sHashing Passwords & Storing User Data The Right Way0sChecking for Email Duplication0sTheory: How Does User Authentication Work?0sChoosing a Third-Party Auth Package (Lucia)0sCreating a New Lucia Auth Instance0sConfiguring A Session & A Session Cookie0sSetting Up An Auth Session0sVerifying An Active Auth Session0sProtecting Routes Against Unauthenticated Access0sSwitching Auth Modes With Query Parameters (Search Params)0sAdding User Login (via a Server Action)0sTriggering Different Server Actions via Query Parameters0sAdding an Auth-only Layout0sOne Root Layout vs Multiple Root LayoutsAdding User Logout0s
-
Roundup & Next Steps
-
Pages & File-based RoutingFrom App Router To Pages Router0sUsing The Code SnapshotsModule Introduction0sOur Starting Setup0sWhat Is “File-based Routing”? And Why Is It Helpful?0sAdding A First Page0sAdding a Named / Static Route File0sWorking with Nested Paths & Routes0sAdding Dynamic Paths & Routes0sExtracting Dynamic Path Segment Data (Dynamic Routes)0sBuilding Nested Dynamic Routes & Paths0sAdding Catch-All Routes0sNavigating with the “Link” Component0sNavigating To Dynamic Routes0sA Different Way Of Setting Link Hrefs0sNavigating Programmatically0sAdding a Custom 404 Page0sModule Summary0sModule Resources
-
Project Time Working with File-based RoutingModule Introduction0sPlanning The Project0sSetting Up The Main Pages0sAdding Dummy Data & Static Files0sAdding Regular React Components0sAdding More React Components & Connecting Components0sStyling Components In Next.js Projects0sLink & NextJS 13Adding Buttons & Icons0sAdding the “Event Detail” Page (Dynamic Route)0sAdding a General Layout Wrapper Component0sWorking on the “All Events” Page0sAdding a Filter Form for Filtering Events0sNavigating to the “Filtered Events” Page Progammatically0sExtracting Data on the Catch-All Page0sFinal Steps0sModule Summary0sModule Resources
-
Page Pre-Rendering & Data FetchingModule Introduction0sThe Problem With Traditional React Apps (and Data Fetching)0sHow NextJS Prepares & Pre-renders Pages0sIntroducing Static Generation with “getStaticProps”0sNextJS Pre-renders By Default!0sAdding “getStaticProps” To Pages0sRunning Server-side Code & Using the Filesystem0sA Look Behind The Scenes0sUtilizing Incremental Static Generation (ISR)0sISR: A Look Behind The Scenes0sA Closer Look At “getStaticProps” & Configuration Options0sWorking With Dynamic Parameters0sIntroducing “getStaticPaths” For Dynamic Pages0sUsing “getStaticPaths”0s“getStaticPaths” & Link Prefetching: Behind The Scenes0sWorking With Fallback Pages0sLoading Paths Dynamically0sFallback Pages & “Not Found” Pages0sIntroducing “getServerSideProps” for Server-side Rendering (SSR)0sUsing “getServerSideProps” for Server-side Rendering0s“getServerSideProps” and its Context0sDynamic Pages & “getServerSideProps”0s“getServerSideProps”: Behind The Scenes0sIntroducing Client-Side Data Fetching (And When To Use It)0sImplementing Client-Side Data Fetching0sA Note About useSWRUsing the “useSWR” NextJS Hook0sCombining Pre-Fetching With Client-Side Fetching0sModule Summary0sModule Resources
-
Project Time Page Pre-rendering & Data FetchingModule Introduction0sPreparations0sAdding Static Site Generation (SSG) On The Home Page0sLoading Data & Paths For Dynamic Pages0sOptimizing Data Fetching0sWorking on the “All Events” Page0sUsing Server-side Rendering (SSR)0sAdding Client-Side Data Fetching0sModule Summary0sModule Resources
-
Optimizing NextJS AppsModule Introduction0sAnalyzing the Need for “head” Metadata0sConfiguring the “head” Content0sAdding Dynamic “head” Content0sReusing Logic Inside A Component0sWorking with the “_app.js” File (and Why)0sMerging “head” Content0sThe “_document.js” File (And What It Does)0sA Closer Look At Our Images0sOptimizing Images with the “Next Image” Component & Feature0sTaking A Look At The “Next Image” Documentation0sModule Summary0sModule Resources
-
Adding Backend Code with API Routes (Fullstack React)Module Introduction0sWhat are “API Routes”?0sWriting Our First API Route0sPreparing the Frontend Form0sParsing The Incoming Request & Executing Server-side Code0sSending Requests To API Routes0sUsing API Routes To Get Data0sUsing API Routes For Pre-Rendering Pages0sCreating & Using Dynamic API Routes0sExploring Different Ways Of Structuring API Route Files0sModule Summary0sModule Resources
-
Project Time API RoutesModule Introduction0sStarting Setup & A Challenge For You!0sAdding a Newsletter Route0sAdding Comments API Routes0sConnecting the Frontend To the Comments API Routes0sSetting Up A MongoDB Database0sRunning MongoDB Queries From Inside API Routes0sInserting Comments Into The Database0sGetting Data From The Database0sAdding Error Handling0sMore Error Handling0sA Final Note On MongoDB ConnectionsModule Summary0sImprovement: Getting Comments For A Specific EventModule Resources
-
Working with App-wide State (React Context)Module Introduction0sOur Target State & Starting Project0sCreating a New React Context0sAdding Context State0sUsing Context Data In Components0sExample: Triggering & Showing Notifications0sExample: Removing Notifications (Automatically)0sChallenge Solution0sModule Summary0sModule Resources
-
Complete App Example Build a Full Blog A to ZModule Introduction0sSetting Up The Core Pages0sGetting Started With The Home Page0sAdding The “Hero” Component0sAdding Layout & Navigation0sTime To Add Styling & A Logo0sStarting Work On The “Featured Posts” Part0sAdding A Post Grid & Post Items0sRendering Dummy Post Data0sAdding the “All Posts” Page0sWorking On The “Post Detail” Page0sRendering Markdown As JSX0sAdding Markdown Files As A Data Source0sAdding Functions To Read & Fetch Data From Markdown Files0sUsing Markdown Data For Rendering Posts0sRendering Dynamic Post Pages & Paths0sRendering Custom HTML Elements with React MarkdownRendering Images With The “Next Image” Component (From Markdown)0sRendering Code Snippets From Markdown0sPreparing The Contact Form0sAdding The Contact API Route0sSending Data From The Client To The API Route0sStoring Messages With MongoDB In A Database0sAdding UI Feedback With Notifications0sAdding “head” Data0sAdding A “_document.js” File0sUsing React Portals0sModule Summary0sModule Resources
-
Deploying NextJS AppsModule Introduction0sBuilding NextJS Apps: Your Options0sKey Deployment Steps0sChecking & Optimizing Our Code0sThe NextJS Config File & Working With Environment Variables0sRunning a Test Build & Reducing Code Size0sA Full Deployment Example (To Vercel)0sA Note On Github & Secret Credentials0sUsing the “export” Feature0sModule Summary0sModule Resources
-
Adding AuthenticationModule Introduction0sOur Starting Project0sHow Does Authentication Work (In React & NextJS Apps)?0sMust Read: Install the Right next-auth VersionUsing The “next-auth” Library0sAdding A User Signup API Route0sSending Signup Requests From The Frontend0sImproving Signup With Unique Email Addresses0sAdding the “Credentials Auth Provider” & User Login Logic0sSending a “Signin” Request From The Frontend0sManaging Active Session (On The Frontend)0sAdding User Logout0sAdding Client-Side Page Guards (Route Protection)0sAdding Server-Side Page Guards (And When To Use Which Approach)0sProtecting the “Auth” Page0sUsing the “next-auth” Session Provider Component0sAnalyzing Further Authentication Requirements0sProtecting API Routes0sAdding the “Change Password” Logic0sSending a “Change Password” Request From The Frontend0sModule Summary & Final Steps0sModule Resources
-
Optional NextJS SummaryModule Introduction0sWhat is NextJS?0sKey Feature: Server-side (Pre-) Rendering of Pages0sKey Feature: File-based Routing0sKey Feature: Build Fullstack Apps With Ease0sCreating a NextJS Project & IDE Setup0sAbout the “App Router”0sAnalyzing the Created Project0sAdding First Pages To The Project0sAdding Nested Pages / Paths0sCreating Dynamic Pages0sExtracting Dynamic Route Data0sLinking Between Pages0sOnwards To A Bigger Project!0sPreparing Our Project Pages0sRendering A List Of (Dummy) Meetups0sAdding A Form For Adding Meetups0sThe “_app.js” File & Wrapper Components0sProgrammatic Navigation0sAdding Custom Components & Styling With CSS Modules0sHow NextJS Page Pre-Rendering Actually Works0sIntroducing Data Fetching For Page Generation (getStaticProps)0sMore Static Site Generation (SSG) With getStaticProps0sExploring getServerSideProps0sWorking With Dynamic Path Params In getStaticProps0sDynamic Pages & getStaticProps & getStaticPaths0sIntroducing API Routes0sConnecting & Querying a MongoDB Database0sSending HTTP Requests To API Routes0sGetting Data From The Database (For Page Pre-Rendering)0sGetting Meetup Detail Data & Paths0sAdding “head” Metadata To Pages0sDeploying NextJS Projects0sWorking With Fallback Pages & Re-Deploying0sModule Summary0sModule Resources
-
Course Roundup
This course teaches you the latest version of Next.js and covers both the “App Router” and “Pages Router” (and explains what these two approaches are).
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! 🙂
What's included
- 40 hours on-demand video
- 36 articles
- Access on mobile and TV
- Certificate of completion