Next.js & React - The Complete Guide

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

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

Using useFormState()

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

Module Introduction

Project Setup, Overview & An Exercise!

Exercise Solution - Part 1

Exercise Solution - Part 2

App Styling & Using Dummy Data

Handling "Not Found" Errors & Showing "Not Found" Pages

Setting Up & Using Parallel Routes

Working with Parallel Routes & Nested Routes

Configuring Catch-All Routes

Catch-All Fallback Routes & Dealing With Multiple Path Segments

Throwing (Route-related) Errors

Handling Errors With Error Pages

Server vs Client Components

Nested Routes Inside Dynamic Routes

Intercepting Navigation & Using Interception Routes

Combining Parallel & Intercepting Routes

Replace page.js with default.js

Navigating Programmatically

Defining the Base HTML Document

Using & Understanding Route Groups

Building APIs with Route Handlers

Using Middleware

Module Summary

Module Introduction

Adding a Backend

Option 1: Client-side Data Fetching

Option 2: Server-side Data Fetching

Why Use A Separate Backend? Fetching Directly From The Source!

Showing a "Loading" Fallback

Migrating An Entire Application To A Local Data Source (Database)

Granular Data Fetching With Suspense

Module Introduction

Starting Project & Analyzing Mutation Options

Setting Up A Form Action

Creating a Server Action

Storing Data in Databases

Providing User Feedback with The useFormStatus Hook

Using useFormState Hook

Validating User Input With Help Of The useFormState Hook

Adjusting Server Actions for useFormState

Storing Server Actions In Separate Files

"use server" Does Not Guarantee Server-side Execution!

Uploading & Storing Images

Alternative Ways of Using, Configuring & Triggering Server Actions

Revalidating Data To Avoid Caching Problems

Performing Optimistic Updates With NextJS

Caching Differences: Development vs Production

Module Introduction

Making Sense of NextJS' Caching Types

Project Setup

Handling Request Memoization

Understanding The Data Cache & Cache Settings

Controlling Data Caching

Making Sense Of The Full Route Cache

On-Demand Cache Invalidation with revalidatePath & revalidateTag

Setting Up Request Memoization For Custom Data Sources

Setting Up Data Caching For Custom Data Sources

Invalidating Custom Data Source Data

Module Summary

Module Introduction

Using the NextJS Image Component

Understanding the NextJS Image Component

Controlling the Image Size

Working with Priority Images & More Settings

Loading Unknown Images

Configuring CSS For Images With The "fill" Prop

Using An Image Loader & Cloudinary Resizing

Page Metadata - An Introduction

Configuring Static Page Metadata

Configuring Dynamic Page Metadata

Understanding Layout Metadata

Module Introduction

Project Setup

User Signup: Extracting & Validating User Input

Storing Users in a Database - The Wrong Way

Hashing Passwords & Storing User Data The Right Way

Checking for Email Duplication

Theory: How Does User Authentication Work?

Choosing a Third-Party Auth Package (Lucia)

Creating a New Lucia Auth Instance

Configuring A Session & A Session Cookie

Setting Up An Auth Session

Verifying An Active Auth Session

Protecting Routes Against Unauthenticated Access

Switching Auth Modes With Query Parameters (Search Params)

Adding User Login (via a Server Action)

Triggering Different Server Actions via Query Parameters

Adding an Auth-only Layout

One Root Layout vs Multiple Root Layouts

Adding User Logout

Course Roundup

But There's More NextJS Content!

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

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

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

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

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

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

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

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

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

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

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

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

Course Roundup

Bonus!