Next.js 14 & React - The Complete Guide by Udemy
Learn NextJS 14 from the ground up and build fullstack ReactJS + NextJS apps with the App Router or Pages Router!
Course Highlights
- 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
Skills you will learn!
Curriculum
9 Topics
Welcome To The Course!
What Is NextJS? Why Would You Use It?
Key Features & Benefits Of NextJS
Creating a First NextJS App
NextJS vs "Just React" - Analyzing The NextJS Project
Editing The First App
Pages Router vs App Router - One Framework Two Approaches
How To Get The Most Out Of This Course
Learning Community & Course Resources
75 Topics
Using the Code Snasphots
Module Introduction
What Is React & Why Would You Use It?
React Projects - Requirements
Creating React Projects
Our Starting Project
Understanding How React Works
Building A First Custom Component
Outputting Dynamic Values
Reusing Components
Passing Data to Components with Props
CSS Styling & CSS Modules
Exercise & Another Component
Preparing the App For State Management
Adding Event Listeners
Working with State
Lifting State Up
The Special "children" Prop
State & Conditional Content
Adding a Shared Header & More State Management
Adding Form Buttons
Handling Form Submission
Updating State Based On Previous State
Outputting List Data
Adding a Backend to the React SPA
Sending a POST HTTP Request
Handling Side Effects with useEffect()
Handle Loading State
Understanding & Adding Routing
Adding Routes
Working with Layout Routes
Refactoring Route Components & More Nesting
Linking & Navigating
Data Fetching via loader()s
Submitting Data with action()s
Dynamic Routes
Module Summary
IMPORTANT -- LEGACY CONTENT BELOW
Module Introduction
What is ReactJS?
Why ReactJS & A First Demo
Building Single-Page Applications (SPAs)
React Alternatives
Creating a New React Project
Setting Up A Code Editor
React 18
Diving Into The Created Project
How React Works & Understanding Components
More Component Work & Styling With CSS Classes
Building & Re-using Components
Passing Data With Props & Dynamic Content
Handling Events
Adding More Components
Introducing State
Working with "Event Props"
Use The Right React Router Version
Adding Routing
Adding Links & Navigation
Scoping Component Styles With CSS Modules
Outputting Lists Of Data & Components
Adding Even More Components
Creating "Wrapper" Components
Working With Forms
Getting User Input & Handling Form Submission
Preparing The App For Http Requests & Adding a Backend
Sending a POST Http Request
Navigating Programmatically
Getting Started with Fetching Data
Using the "useEffect" Hook
Introducing React Context
Updating State Based On Previous State
Using Context In Components
More Context Usage
Module Summary
Module Resources
48 Topics
Module Introduction
Starting Setup
Understanding File-based Routing & React Server Components
Adding Another Route via the File System
Navigating Between Pages - Wrong & Right Solution
Working with Pages & Layouts
Reserved File Names Custom Components & How To Organize A NextJS Project
Reserved Filenames
Configuring Dynamic Routes & Using Route Parameters
Onwards to the Main Project: The Foodies App
Exercise: Your Task
Exercise: Solution
Revisiting The Concept Of Layouts
Adding a Custom Component To A Layout
Styling NextJS Project: Your Options & Using CSS Modules
Optimizing Images with the NextJS Image Component
Using More Custom Components
Populating The Starting Page Content
Preparing an Image Slideshow
React Server Components vs Client Components - When To Use What
Using Client Components Efficiently
Outputting Meals Data & Images With Unknown Dimensions
Setting Up A SQLite Database
Fetching Data By Leveraging NextJS & Fullstack Capabilities
Adding A Loading Page
Using Suspense & Streamed Responses For Granular Loading State Management
Handling Errors
Handling "Not Found" States
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Throwing Not Found Errors For Individual Meals
Getting Started with the "Share Meal" Form
Getting Started with a Custom Image Picker Input Component
Adding an Image Preview to the Picker
Improving the Image Picker Component
Introducing & Using Server Actions for Handling Form Submissions
Storing Server Actions in Separate Files
Creating a Slug & Sanitizing User Input for XSS Protection
Storing Uploaded Images & Storing Data in the Database
Managing the Form Submission Status with useFormStatus
Adding Server-Side Input Validation
Working with Server Action Responses & useFormState
Building For Production & Understanding NextJS Caching
Triggering Cache Revalidations
Don't Store Files Locally On The Filesystem!
Bonus: Storing Uploaded Images In The Cloud (AWS S3)
Adding Static Metadata
Adding Dynamic Metadata
Module Summary
19 Topics
From App Router To Pages Router
Using The Code Snapshots
Module Introduction
Our Starting Setup
What Is "File-based Routing"? And Why Is It Helpful?
Adding A First Page
Adding a Named / Static Route File
Working with Nested Paths & Routes
Adding Dynamic Paths & Routes
Extracting Dynamic Path Segment Data (Dynamic Routes)
Building Nested Dynamic Routes & Paths
Adding Catch-All Routes
Navigating with the "Link" Component
Navigating To Dynamic Routes
A Different Way Of Setting Link Hrefs
Navigating Programmatically
Adding a Custom 404 Page
Module Summary
Module Resources
18 Topics
Module Introduction
Planning The Project
Setting Up The Main Pages
Adding Dummy Data & Static Files
Adding Regular React Components
Adding More React Components & Connecting Components
Styling Components In Next.js Projects
<Link> & NextJS 13
Adding Buttons & Icons
Adding the "Event Detail" Page (Dynamic Route)
Adding a General Layout Wrapper Component
Working on the "All Events" Page
Adding a Filter Form for Filtering Events
Navigating to the "Filtered Events" Page Progammatically
Extracting Data on the Catch-All Page
Final Steps
Module Summary
Module Resources
30 Topics
Module Introduction
The Problem With Traditional React Apps (and Data Fetching)
How NextJS Prepares & Pre-renders Pages
Introducing Static Generation with "getStaticProps"
NextJS Pre-renders By Default!
Adding "getStaticProps" To Pages
Running Server-side Code & Using the Filesystem
A Look Behind The Scenes
Utilizing Incremental Static Generation (ISR)
ISR: A Look Behind The Scenes
A Closer Look At "getStaticProps" & Configuration Options
Working With Dynamic Parameters
Introducing "getStaticPaths" For Dynamic Pages
Using "getStaticPaths"
"getStaticPaths" & Link Prefetching: Behind The Scenes
Working With Fallback Pages
Loading Paths Dynamically
Fallback Pages & "Not Found" Pages
Introducing "getServerSideProps" for Server-side Rendering (SSR)
Using "getServerSideProps" for Server-side Rendering
"getServerSideProps" and its Context
Dynamic Pages & "getServerSideProps"
"getServerSideProps": Behind The Scenes
Introducing Client-Side Data Fetching (And When To Use It)
Implementing Client-Side Data Fetching
A Note About useSWR
Using the "useSWR" NextJS Hook
Combining Pre-Fetching With Client-Side Fetching
Module Summary
Module Resources
10 Topics
Module Introduction
Preparations
Adding Static Site Generation (SSG) On The Home Page
Loading Data & Paths For Dynamic Pages
Optimizing Data Fetching
Working on the "All Events" Page
Using Server-side Rendering (SSR)
Adding Client-Side Data Fetching
Module Summary
Module Resources
13 Topics
Module Introduction
Analyzing the Need for "head" Metadata
Configuring the "head" Content
Adding Dynamic "head" Content
Reusing Logic Inside A Component
Working with the "_app.js" File (and Why)
Merging "head" Content
The "_document.js" File (And What It Does)
A Closer Look At Our Images
Optimizing Images with the "Next Image" Component & Feature
Taking A Look At The "Next Image" Documentation
Module Summary
Module Resources
12 Topics
Module Introduction
What are "API Routes"?
Writing Our First API Route
Preparing the Frontend Form
Parsing The Incoming Request & Executing Server-side Code
Sending Requests To API Routes
Using API Routes To Get Data
Using API Routes For Pre-Rendering Pages
Creating & Using Dynamic API Routes
Exploring Different Ways Of Structuring API Route Files
Module Summary
Module Resources
15 Topics
Module Introduction
Starting Setup & A Challenge For You!
Adding a Newsletter Route
Adding Comments API Routes
Connecting the Frontend To the Comments API Routes
Setting Up A MongoDB Database
Running MongoDB Queries From Inside API Routes
Inserting Comments Into The Database
Getting Data From The Database
Adding Error Handling
More Error Handling
A Final Note On MongoDB Connections
Module Summary
Improvement: Getting Comments For A Specific Event
Module Resources
10 Topics
Module Introduction
Our Target State & Starting Project
Creating a New React Context
Adding Context State
Using Context Data In Components
Example: Triggering & Showing Notifications
Example: Removing Notifications (Automatically)
Challenge Solution
Module Summary
Module Resources
29 Topics
Module Introduction
Setting Up The Core Pages
Getting Started With The Home Page
Adding The "Hero" Component
Adding Layout & Navigation
Time To Add Styling & A Logo
Starting Work On The "Featured Posts" Part
Adding A Post Grid & Post Items
Rendering Dummy Post Data
Adding the "All Posts" Page
Working On The "Post Detail" Page
Rendering Markdown As JSX
Adding Markdown Files As A Data Source
Adding Functions To Read & Fetch Data From Markdown Files
Using Markdown Data For Rendering Posts
Rendering Dynamic Post Pages & Paths
Rendering Custom HTML Elements with React Markdown
Rendering Images With The "Next Image" Component (From Markdown)
Rendering Code Snippets From Markdown
Preparing The Contact Form
Adding The Contact API Route
Sending Data From The Client To The API Route
Storing Messages With MongoDB In A Database
Adding UI Feedback With Notifications
Adding "head" Data
Adding A "_document.js" File
Using React Portals
Module Summary
Module Resources
11 Topics
Module Introduction
Building NextJS Apps: Your Options
Key Deployment Steps
Checking & Optimizing Our Code
The NextJS Config File & Working With Environment Variables
Running a Test Build & Reducing Code Size
A Full Deployment Example (To Vercel)
A Note On Github & Secret Credentials
Using the "export" Feature
Module Summary
Module Resources
22 Topics
Module Introduction
Our Starting Project
How Does Authentication Work (In React & NextJS Apps)?
Must Read: Install the Right next-auth Version
Using The "next-auth" Library
Adding A User Signup API Route
Sending Signup Requests From The Frontend
Improving Signup With Unique Email Addresses
Adding the "Credentials Auth Provider" & User Login Logic
Sending a "Signin" Request From The Frontend
Managing Active Session (On The Frontend)
Adding User Logout
Adding Client-Side Page Guards (Route Protection)
Adding Server-Side Page Guards (And When To Use Which Approach)
Protecting the "Auth" Page
Using the "next-auth" Session Provider Component
Analyzing Further Authentication Requirements
Protecting API Routes
Adding the "Change Password" Logic
Sending a "Change Password" Request From The Frontend
Module Summary & Final Steps
Module Resources
36 Topics
Module Introduction
What is NextJS?
Key Feature: Server-side (Pre-) Rendering of Pages
Key Feature: File-based Routing
Key Feature: Build Fullstack Apps With Ease
Creating a NextJS Project & IDE Setup
About the "App Router"
Analyzing the Created Project
Adding First Pages To The Project
Adding Nested Pages / Paths
Creating Dynamic Pages
Extracting Dynamic Route Data
Linking Between Pages
Onwards To A Bigger Project!
Preparing Our Project Pages
Rendering A List Of (Dummy) Meetups
Adding A Form For Adding Meetups
The "_app.js" File & Wrapper Components
Programmatic Navigation
Adding Custom Components & Styling With CSS Modules
How NextJS Page Pre-Rendering Actually Works
Introducing Data Fetching For Page Generation (getStaticProps)
More Static Site Generation (SSG) With getStaticProps
Exploring getServerSideProps
Working With Dynamic Path Params In getStaticProps
Dynamic Pages & getStaticProps & getStaticPaths
Introducing API Routes
Connecting & Querying a MongoDB Database
Sending HTTP Requests To API Routes
Getting Data From The Database (For Page Pre-Rendering)
Getting Meetup Detail Data & Paths
Adding "head" Metadata To Pages
Deploying NextJS Projects
Working With Fallback Pages & Re-Deploying
Module Summary
Module Resources
2 Topics
Course Roundup
Bonus!
Next.js 14 & React - The Complete Guide
Related Next.js Courses
Thank You!
Your review has been submitted successfully.