Next.Js 14 & React - The Complete Guide
Last updated 12/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English
| Size: 13.91 GB
| Duration: 32h 25m
Learn NextJS 14 from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!
What you'll learn
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
Requirements
ReactJS knowledge is strongly recommended, but the course also includes a complete React refresher module
NO prior NextJS knowledge is required
Description
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 & moreCovers file upload & storage on S3Completely updated the "React Refresher" sectionNo 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 projectsWorking with file-based routingAdding dynamic routes and catch-all routesImplementing different forms of page pre-rendering and server-side renderingWorking with data and adding data fetching + pre-fetching to your appsHandling form submissions with Server ActionsHandling File uploadPre-generating dynamic and static pagesAdding optimizations like metadata to pagesOptimizing images with the NextJS Image componentBuilding fullstack apps with API routes or Server ActionsManaging app-wide state with React context (in NextJS apps)Adding authentication to NextJS appsMultiple 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 quicklyAnd much more!I can't wait to start this journey together with you!
Overview
Section 1: Getting Started
Lecture 1 Welcome To The Course!
Lecture 2 What Is NextJS? Why Would You Use It?
Lecture 3 Key Features & Benefits Of NextJS
Lecture 4 Creating a First NextJS App
Lecture 5 NextJS vs "Just React" - Analyzing The NextJS Project
Lecture 6 Editing The First App
Lecture 7 Pages Router vs App Router - One Framework, Two Approaches
Lecture 8 How To Get The Most Out Of This Course
Lecture 9 Learning Community & Course Resources
Section 2: Optional: React Refresher
Lecture 10 Using the Code Snasphots
Lecture 11 Module Introduction
Lecture 12 What Is React & Why Would You Use It?
Lecture 13 React Projects -
Requirements
Lecture 14 Creating React Projects
Lecture 15 Our Starting Project
Lecture 16 Understanding How React Works
Lecture 17 Building A First Custom Component
Lecture 18 Outputting Dynamic Values
Lecture 19 Reusing Components
Lecture 20 Passing Data to Components with Props
Lecture 21 CSS Styling & CSS Modules
Lecture 22 Exercise & Another Component
Lecture 23 Preparing the App For State Management
Lecture 24 Adding Event Listeners
Lecture 25 Working with State
Lecture 26 Lifting State Up
Lecture 27 The Special "children" Prop
Lecture 28 State & Conditional Content
Lecture 29 Adding a Shared Header & More State Management
Lecture 30 Adding Form Buttons
Lecture 31 Handling Form Submission
Lecture 32 Updating State Based On Previous State
Lecture 33 Outputting List Data
Lecture 34 Adding a Backend to the React SPA
Lecture 35 Sending a POST HTTP Request
Lecture 36 Handling Side Effects with useEffect()
Lecture 37 Handle Loading State
Lecture 38 Understanding & Adding Routing
Lecture 39 Adding Routes
Lecture 40 Working with Layout Routes
Lecture 41 Refactoring Route Components & More Nesting
Lecture 42 Linking & Navigating
Lecture 43 Data Fetching via loader()s
Lecture 44 Submitting Data with action()s
Lecture 45 Dynamic Routes
Lecture 46 Module Summary
Lecture 47 IMPORTANT - LEGACY CONTENT BELOW
Lecture 48 Module Introduction
Lecture 49 What is ReactJS?
Lecture 50 Why ReactJS & A First Demo
Lecture 51 Building Single-Page Applications (SPAs)
Lecture 52 React Alternatives
Lecture 53 Creating a New React Project
Lecture 54 Setting Up A Code Editor
Lecture 55 React 18
Lecture 56 Diving Into The Created Project
Lecture 57 How React Works & Understanding Components
Lecture 58 More Component Work & Styling With CSS Classes
Lecture 59 Building & Re-using Components
Lecture 60 Passing Data With Props & Dynamic Content
Lecture 61 Handling Events
Lecture 62 Adding More Components
Lecture 63 Introducing State
Lecture 64 Working with "Event Props"
Lecture 65 Use The Right React Router Version
Lecture 66 Adding Routing
Lecture 67 Adding Links & Navigation
Lecture 68 Scoping Component Styles With CSS Modules
Lecture 69 Outputting Lists Of Data & Components
Lecture 70 Adding Even More Components
Lecture 71 Creating "Wrapper" Components
Lecture 72 Working With Forms
Lecture 73 Getting User Input & Handling Form Submission
Lecture 74 Preparing The App For Http Requests & Adding a Backend
Lecture 75 Sending a POST Http Request
Lecture 76 Navigating Programmatically
Lecture 77 Getting Started with Fetching Data
Lecture 78 Using the "useEffect" Hook
Lecture 79 Introducing React Context
Lecture 80 Updating State Based On Previous State
Lecture 81 Using Context In Components
Lecture 82 More Context Usage
Lecture 83 Module Summary
Lecture 84 Module Resources
Section 3: NextJS Essentials (App Router)
Lecture 85 Module Introduction
Lecture 86 Starting Setup
Lecture 87 Understanding File-based Routing & React Server Components
Lecture 88 Adding Another Route via the File System
Lecture 89 Navigating Between Pages - Wrong & Right Solution
Lecture 90 Working with Pages & Layouts
Lecture 91 Reserved File Names, Custom Components & How To Organize A NextJS Project
Lecture 92 Reserved Filenames
Lecture 93 Configuring Dynamic Routes & Using Route Parameters
Lecture 94 Onwards to the Main Project: The Foodies App
Lecture 95 Exercise: Your Task
Lecture 96 Exercise: Solution
Lecture 97 Revisiting The Concept Of Layouts
Lecture 98 Adding a Custom Component To A Layout
Lecture 99 Styling NextJS Project: Your Options & Using CSS Modules
Lecture 100 Optimizing Images with the NextJS Image Component
Lecture 101 Using More Custom Components
Lecture 102 Populating The Starting Page Content
Lecture 103 Preparing an Image Slideshow
Lecture 104 React Server Components vs Client Components - When To Use What
Lecture 105 Using Client Components Efficiently
Lecture 106 Outputting Meals Data & Images With Unknown Dimensions
Lecture 107 Setting Up A SQLite Database
Lecture 108 Fetching Data By Leveraging NextJS & Fullstack Capabilities
Lecture 109 Adding A Loading Page
Lecture 110 Using Suspense & Streamed Responses For Granular Loading State Management
Lecture 111 Handling Errors
Lecture 112 Handling "Not Found" States
Lecture 113 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Lecture 114 Throwing Not Found Errors For Individual Meals
Lecture 115 Getting Started with the "Share Meal" Form
Lecture 116 Getting Started with a Custom Image Picker Input Component
Lecture 117 Adding an Image Preview to the Picker
Lecture 118 Improving the Image Picker Component
Lecture 119 Introducing & Using Server Actions for Handling Form Submissions
Lecture 120 Storing Server Actions in Separate Files
Lecture 121 Creating a Slug & Sanitizing User Input for XSS Protection
Lecture 122 Storing Uploaded Images & Storing Data in the Database
Lecture 123 Managing the Form Submission Status with useFormStatus
Lecture 124 Adding Server-Side Input Validation
Lecture 125 Working with Server Action Responses & useFormState
Lecture 126 Building For Production & Understanding NextJS Caching
Lecture 127 Triggering Cache Revalidations
Lecture 128 Don't Store Files Locally On The Filesystem!
Lecture 129 Bonus: Storing Uploaded Images In The Cloud (AWS S3)
Lecture 130 Adding Static Metadata
Lecture 131 Adding Dynamic Metadata
Lecture 132 Module Summary
Section 4: Pages & File-based Routing
Lecture 133 From App Router To Pages Router
Lecture 134 Using The Code Snapshots
Lecture 135 Module Introduction
Lecture 136 Our Starting Setup
Lecture 137 What Is "File-based Routing"? And Why Is It Helpful?
Lecture 138 Adding A First Page
Lecture 139 Adding a Named / Static Route File
Lecture 140 Working with Nested Paths & Routes
Lecture 141 Adding Dynamic Paths & Routes
Lecture 142 Extracting Dynamic Path Segment Data (Dynamic Routes)
Lecture 143 Building Nested Dynamic Routes & Paths
Lecture 144 Adding Catch-All Routes
Lecture 145 Navigating with the "Link" Component
Lecture 146 Navigating To Dynamic Routes
Lecture 147 A Different Way Of Setting Link Hrefs
Lecture 148 Navigating Programmatically
Lecture 149 Adding a Custom 404 Page
Lecture 150 Module Summary
Lecture 151 Module Resources
Section 5: Project Time: Working with File-based Routing
Lecture 152 Module Introduction
Lecture 153 Planning The Project
Lecture 154 Setting Up The Main Pages
Lecture 155 Adding Dummy Data & Static Files
Lecture 156 Adding Regular React Components
Lecture 157 Adding More React Components & Connecting Components
Lecture 158 Styling Components In Next.js Projects
Lecture 159 & NextJS 13
Lecture 160 Adding Buttons & Icons
Lecture 161 Adding the "Event Detail" Page (Dynamic Route)
Lecture 162 Adding a General Layout Wrapper Component
Lecture 163 Working on the "All Events" Page
Lecture 164 Adding a Filter Form for Filtering Events
Lecture 165 Navigating to the "Filtered Events" Page Progammatically
Lecture 166 Extracting Data on the Catch-All Page
Lecture 167 Final Steps
Lecture 168 Module Summary
Lecture 169 Module Resources
Section 6: Page Pre-Rendering & Data Fetching
Lecture 170 Module Introduction
Lecture 171 The Problem With Traditional React Apps (and Data Fetching)
Lecture 172 How NextJS Prepares & Pre-renders Pages
Lecture 173 Introducing Static Generation with "getStaticProps"
Lecture 174 NextJS Pre-renders By Default!
Lecture 175 Adding "getStaticProps" To Pages
Lecture 176 Running Server-side Code & Using the Filesystem
Lecture 177 A Look Behind The Scenes
Lecture 178 Utilizing Incremental Static Generation (ISR)
Lecture 179 ISR: A Look Behind The Scenes
Lecture 180 A Closer Look At "getStaticProps" & Configuration Options
Lecture 181 Working With Dynamic Parameters
Lecture 182 Introducing "getStaticPaths" For Dynamic Pages
Lecture 183 Using "getStaticPaths"
Lecture 184 "getStaticPaths" & Link Prefetching: Behind The Scenes
Lecture 185 Working With Fallback Pages
Lecture 186 Loading Paths Dynamically
Lecture 187 Fallback Pages & "Not Found" Pages
Lecture 188 Introducing "getServerSideProps" for Server-side Rendering (SSR)
Lecture 189 Using "getServerSideProps" for Server-side Rendering
Lecture 190 "getServerSideProps" and its Context
Lecture 191 Dynamic Pages & "getServerSideProps"
Lecture 192 "getServerSideProps": Behind The Scenes
Lecture 193 Introducing Client-Side Data Fetching (And When To Use It)
Lecture 194 Implementing Client-Side Data Fetching
Lecture 195 A Note About useSWR
Lecture 196 Using the "useSWR" NextJS Hook
Lecture 197 Combining Pre-Fetching With Client-Side Fetching
Lecture 198 Module Summary
Lecture 199 Module Resources
Section 7: Project Time: Page Pre-rendering & Data Fetching
Lecture 200 Module Introduction
Lecture 201 Preparations
Lecture 202 Adding Static Site Generation (SSG) On The Home Page
Lecture 203 Loading Data & Paths For Dynamic Pages
Lecture 204 Optimizing Data Fetching
Lecture 205 Working on the "All Events" Page
Lecture 206 Using Server-side Rendering (SSR)
Lecture 207 Adding Client-Side Data Fetching
Lecture 208 Module Summary
Lecture 209 Module Resources
Section 8: Optimizing NextJS Apps
Lecture 210 Module Introduction
Lecture 211 Analyzing the Need for "head" Metadata
Lecture 212 Configuring the "head" Content
Lecture 213 Adding Dynamic "head" Content
Lecture 214 Reusing Logic Inside A Component
Lecture 215 Working with the "_app.js" File (and Why)
Lecture 216 Merging "head" Content
Lecture 217 The "_document.js" File (And What It Does)
Lecture 218 A Closer Look At Our Images
Lecture 219 Optimizing Images with the "Next Image" Component & Feature
Lecture 220 Taking A Look At The "Next Image" Documentation
Lecture 221 Module Summary
Lecture 222 Module Resources
Section 9: Adding Backend Code with API Routes (Fullstack React)
Lecture 223 Module Introduction
Lecture 224 What are "API Routes"?
Lecture 225 Writing Our First API Route
Lecture 226 Preparing the Frontend Form
Lecture 227 Parsing The Incoming Request & Executing Server-side Code
Lecture 228 Sending Requests To API Routes
Lecture 229 Using API Routes To Get Data
Lecture 230 Using API Routes For Pre-Rendering Pages
Lecture 231 Creating & Using Dynamic API Routes
Lecture 232 Exploring Different Ways Of Structuring API Route Files
Lecture 233 Module Summary
Lecture 234 Module Resources
Section 10: Project Time: API Routes
Lecture 235 Module Introduction
Lecture 236 Starting Setup & A Challenge For You!
Lecture 237 Adding a Newsletter Route
Lecture 238 Adding Comments API Routes
Lecture 239 Connecting the Frontend To the Comments API Routes
Lecture 240 Setting Up A MongoDB Database
Lecture 241 Running MongoDB Queries From Inside API Routes
Lecture 242 Inserting Comments Into The Database
Lecture 243 Getting Data From The Database
Lecture 244 Adding Error Handling
Lecture 245 More Error Handling
Lecture 246 A Final Note On MongoDB Connections
Lecture 247 Module Summary
Lecture 248 Improvement: Getting Comments For A Specific Event
Lecture 249 Module Resources
Section 11: Working with App-wide State (React Context)
Lecture 250 Module Introduction
Lecture 251 Our Target State & Starting Project
Lecture 252 Creating a New React Context
Lecture 253 Adding Context State
Lecture 254 Using Context Data In Components
Lecture 255 Example: Triggering & Showing Notifications
Lecture 256 Example: Removing Notifications (Automatically)
Lecture 257 Challenge Solution
Lecture 258 Module Summary
Lecture 259 Module Resources
Section 12: Complete App Example: Build a Full Blog A to Z
Lecture 260 Module Introduction
Lecture 261 Setting Up The Core Pages
Lecture 262 Getting Started With The Home Page
Lecture 263 Adding The "Hero" Component
Lecture 264 Adding Layout & Navigation
Lecture 265 Time To Add Styling & A Logo
Lecture 266 Starting Work On The "Featured Posts" Part
Lecture 267 Adding A Post Grid & Post Items
Lecture 268 Rendering Dummy Post Data
Lecture 269 Adding the "All Posts" Page
Lecture 270 Working On The "Post Detail" Page
Lecture 271 Rendering Markdown As JSX
Lecture 272 Adding Markdown Files As A Data Source
Lecture 273 Adding Functions To Read & Fetch Data From Markdown Files
Lecture 274 Using Markdown Data For Rendering Posts
Lecture 275 Rendering Dynamic Post Pages & Paths
Lecture 276 Rendering Custom HTML Elements with React Markdown
Lecture 277 Rendering Images With The "Next Image" Component (From Markdown)
Lecture 278 Rendering Code Snippets From Markdown
Lecture 279 Preparing The Contact Form
Lecture 280 Adding The Contact API Route
Lecture 281 Sending Data From The Client To The API Route
Lecture 282 Storing Messages With MongoDB In A Database
Lecture 283 Adding UI Feedback With Notifications
Lecture 284 Adding "head" Data
Lecture 285 Adding A "_document.js" File
Lecture 286 Using React Portals
Lecture 287 Module Summary
Lecture 288 Module Resources
Section 13: Deploying NextJS Apps
Lecture 289 Module Introduction
Lecture 290 Building NextJS Apps: Your Options
Lecture 291 Key Deployment Steps
Lecture 292 Checking & Optimizing Our Code
Lecture 293 The NextJS Config File & Working With Environment Variables
Lecture 294 Running a Test Build & Reducing Code Size
Lecture 295 A Full Deployment Example (To Vercel)
Lecture 296 A Note On Github & Secret Credentials
Lecture 297 Using the "export" Feature
Lecture 298 Module Summary
Lecture 299 Module Resources
Section 14: Adding Authentication
Lecture 300 Module Introduction
Lecture 301 Our Starting Project
Lecture 302 How Does Authentication Work (In React & NextJS Apps)?
Lecture 303 Must Read: Install the Right next-auth Version
Lecture 304 Using The "next-auth" Library
Lecture 305 Adding A User Signup API Route
Lecture 306 Sending Signup Requests From The Frontend
Lecture 307 Improving Signup With Unique Email Addresses
Lecture 308 Adding the "Credentials Auth Provider" & User Login Logic
Lecture 309 Sending a "Signin" Request From The Frontend
Lecture 310 Managing Active Session (On The Frontend)
Lecture 311 Adding User Logout
Lecture 312 Adding Client-Side Page Guards (Route Protection)
Lecture 313 Adding Server-Side Page Guards (And When To Use Which Approach)
Lecture 314 Protecting the "Auth" Page
Lecture 315 Using the "next-auth" Session Provider Component
Lecture 316 Analyzing Further Authentication
Requirements
Lecture 317 Protecting API Routes
Lecture 318 Adding the "Change Password" Logic
Lecture 319 Sending a "Change Password" Request From The Frontend
Lecture 320 Module Summary & Final Steps
Lecture 321 Module Resources
Section 15: Optional: NextJS Summary
Lecture 322 Module Introduction
Lecture 323 What is NextJS?
Lecture 324 Key Feature: Server-side (Pre-) Rendering of Pages
Lecture 325 Key Feature: File-based Routing
Lecture 326 Key Feature: Build Fullstack Apps With Ease
Lecture 327 Creating a NextJS Project & IDE Setup
Lecture 328 About the "App Router"
Lecture 329 Analyzing the Created Project
Lecture 330 Adding First Pages To The Project
Lecture 331 Adding Nested Pages / Paths
Lecture 332 Creating Dynamic Pages
Lecture 333 Extracting Dynamic Route Data
Lecture 334 Linking Between Pages
Lecture 335 Onwards To A Bigger Project!
Lecture 336 Preparing Our Project Pages
Lecture 337 Rendering A List Of (Dummy) Meetups
Lecture 338 Adding A Form For Adding Meetups
Lecture 339 The "_app.js" File & Wrapper Components
Lecture 340 Programmatic Navigation
Lecture 341 Adding Custom Components & Styling With CSS Modules
Lecture 342 How NextJS Page Pre-Rendering Actually Works
Lecture 343 Introducing Data Fetching For Page Generation (getStaticProps)
Lecture 344 More Static Site Generation (SSG) With getStaticProps
Lecture 345 Exploring getServerSideProps
Lecture 346 Working With Dynamic Path Params In getStaticProps
Lecture 347 Dynamic Pages & getStaticProps & getStaticPaths
Lecture 348 Introducing API Routes
Lecture 349 Connecting & Querying a MongoDB Database
Lecture 350 Sending HTTP Requests To API Routes
Lecture 351 Getting Data From The Database (For Page Pre-Rendering)
Lecture 352 Getting Meetup Detail Data & Paths
Lecture 353 Adding "head" Metadata To Pages
Lecture 354 Deploying NextJS Projects
Lecture 355 Working With Fallback Pages & Re-Deploying
Lecture 356 Module Summary
Lecture 357 Module Resources
Section 16: Course Roundup
Lecture 358 Course Roundup
Lecture 359 Bonus!
React developers who want to take the next step and build production-ready React apps,React developers who aim to build fullstack React apps,Web developers in general, who want to work with one of the most popular and in-demand tech stacks
Free search engine download: Udemy Next js 14 React The Complete Guide
