Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Next.js 14 & React - The Complete Guide (incl. App Router)
Getting Started
Welcome To The Course! (1:20)
What Is NextJS? Why Would You Use It? (2:20)
Key Features & Benefits Of NextJS (2:40)
Creating a First NextJS App (4:25)
NextJS vs "Just React" - Analyzing The NextJS Project (2:30)
Editing The First App (2:21)
Pages Router vs App Router - One Framework, Two Approaches (2:29)
How To Get The Most Out Of This Course (3:05)
Learning Community & Course Resources
The Academind Pro Referral Program
Optional: React Refresher
Using the Code Snasphots
Module Introduction (1:08)
What Is React & Why Would You Use It? (5:37)
React Projects - Requirements (2:09)
Creating React Projects (3:27)
Our Starting Project (3:28)
Understanding How React Works (7:46)
Building A First Custom Component (11:15)
Outputting Dynamic Values (5:03)
Reusing Components (6:00)
Passing Data to Components with Props (6:15)
CSS Styling & CSS Modules (10:07)
Exercise & Another Component (6:31)
Preparing the App For State Management (3:46)
Adding Event Listeners (7:52)
Working with State (10:00)
Lifting State Up (9:08)
The Special "children" Prop (7:21)
State & Conditional Content (8:59)
Adding a Shared Header & More State Management (7:51)
Adding Form Buttons (3:34)
Handling Form Submission (6:18)
Updating State Based On Previous State (5:30)
Outputting List Data (6:39)
Adding a Backend to the React SPA (6:10)
Sending a POST HTTP Request (4:12)
Handling Side Effects with useEffect() (9:06)
Handle Loading State (4:23)
Understanding & Adding Routing (3:55)
Adding Routes (5:36)
Working with Layout Routes (4:08)
Refactoring Route Components & More Nesting (5:35)
Linking & Navigating (8:09)
Data Fetching via loader()s (9:07)
Submitting Data with action()s (11:08)
Dynamic Routes (8:41)
Module Summary (1:25)
NextJS Essentials (App Router)
Module Introduction (1:20)
Starting Setup (2:32)
Understanding File-based Routing & React Server Components (2:45)
Adding Another Route via the File System (3:06)
Navigating Between Pages - Wrong & Right Solution (4:12)
Working with Pages & Layouts (3:22)
Reserved File Names, Custom Components & How To Organize A NextJS Project (6:31)
Reserved Filenames
Configuring Dynamic Routes & Using Route Parameters (6:17)
Onwards to the Main Project: The Foodies App (1:24)
Exercise: Your Task (2:03)
Exercise: Solution (8:19)
Revisiting The Concept Of Layouts (3:50)
Adding a Custom Component To A Layout (5:58)
Styling NextJS Project: Your Options & Using CSS Modules (6:00)
Optimizing Images with the NextJS Image Component (4:57)
Using More Custom Components (3:48)
Populating The Starting Page Content (4:18)
Preparing an Image Slideshow (3:25)
React Server Components vs Client Components - When To Use What (8:15)
Using Client Components Efficiently (11:07)
Outputting Meals Data & Images With Unknown Dimensions (10:31)
Setting Up A SQLite Database (3:11)
Fetching Data By Leveraging NextJS & Fullstack Capabilities (7:17)
Adding A Loading Page (4:00)
Using Suspense & Streamed Responses For Granular Loading State Management (5:54)
Handling Errors (5:22)
Handling "Not Found" States (1:57)
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters (11:04)
Throwing Not Found Errors For Individual Meals (2:03)
Getting Started with the "Share Meal" Form (1:53)
Adding an Image Preview to the Picker (6:00)
Getting Started with a Custom Image Picker Input Component (8:28)
Improving the Image Picker Component
Introducing & Using Server Actions for Handling Form Submissions (9:02)
Storing Server Actions in Separate Files (3:45)
Creating a Slug & Sanitizing User Input for XSS Protection (3:20)
Storing Uploaded Images & Storing Data in the Database (12:56)
Managing the Form Submission Status with useFormStatus (5:30)
Adding Server-Side Input Validation (5:54)
Working with Server Action Responses & useFormState (8:05)
Building For Production & Understanding NextJS Caching (6:06)
Triggering Cache Revalidations (3:57)
Don't Store Files Locally On The Filesystem! (2:13)
Bonus: Storing Uploaded Images In The Cloud (AWS S3)
Adding Static Metadata (3:47)
Adding Dynamic Metadata (2:20)
Module Summary (4:25)
Routing & Page Rendering - Deep Dive
Module Introduction (1:37)
Project Setup, Overview & An Exercise! (4:17)
Exercise Solution - Part 1 (7:17)
Exercise Solution - Part 2 (4:56)
App Styling & Using Dummy Data (8:59)
Handling "Not Found" Errors & Showing "Not Found" Pages (4:39)
Setting Up & Using Parallel Routes (6:40)
Working with Parallel Routes & Nested Routes (12:50)
Configuring Catch-All Routes (6:01)
Catch-All Fallback Routes & Dealing With Multiple Path Segments (9:21)
Throwing (Route-related) Errors (3:38)
Handling Errors With Error Pages (3:02)
Server vs Client Components (10:10)
Nested Routes Inside Dynamic Routes (4:56)
Intercepting Navigation & Using Interception Routes (5:11)
Combining Parallel & Intercepting Routes (7:42)
Navigating Programmatically (2:42)
Using & Understanding Route Groups (6:39)
Building APIs with Route Handlers (5:15)
Using Middleware (5:40)
Module Summary (0:30)
Data Fetching - Deep Dive
Module Introduction (0:56)
Adding a Backend (2:46)
Option 1: Client-side Data Fetching (8:50)
Option 2: Server-side Data Fetching (5:36)
Why Use A Separate Backend? Fetching Directly From The Source! (6:14)
Showing a "Loading" Fallback (4:50)
Migrating An Entire Application To A Local Data Source (Database) (13:19)
Granular Data Fetching With Suspense (11:35)
Mutating Data - Deep Dive
Module Introduction (1:11)
Starting Project & Analyzing Mutation Options (5:46)
Setting Up A Form Action (9:19)
Creating a Server Action (4:16)
Storing Data in Databases (4:39)
Providing User Feedback with The useFormStatus Hook (6:04)
Validating User Input With Help Of The useFormState Hook (9:57)
Adjusting Server Actions for useFormState (7:40)
Storing Server Actions In Separate Files (3:57)
"use server" Does Not Guarantee Server-side Execution!
Uploading & Storing Images (8:13)
Alternative Ways of Using, Configuring & Triggering Server Actions (11:00)
Revalidating Data To Avoid Caching Problems (4:45)
Performing Optimistic Updates With NextJS (11:42)
Caching Differences: Development vs Production (6:13)
Understanding & Configuring Caching
Module Introduction (1:09)