Download Attachment - Free IT Course Platform

Skip to content

Course List
Free Ebook
Knowledge Sharing
Search for:

Course Content

01 – Getting Started

0/9

Download Attachment

Lesson 001 Welcome To The Course!

Lesson 002 What Is NextJS Why Would You Use It

Lesson 003 Key Features & Benefits Of NextJS

Lesson 004 Creating a First NextJS App

Lesson 005 NextJS vs Just React – Analyzing The NextJS Project

Lesson 006 Editing The First App

Lesson 007 Pages Router vs App Router – One Framework, Two Approaches

Lesson 008 How To Get The Most Out Of This Course

02 – Optional React Refresher

0/71

Download Attachment

Lesson 002 Module Introduction

Lesson 003 What Is React & Why Would You Use It

Lesson 004 React Projects – Requirements

Lesson 005 Creating React Projects

Lesson 006 Our Starting Project

Lesson 007 Understanding How React Works

Lesson 008 Building A First Custom Component

Lesson 009 Outputting Dynamic Values

Lesson 010 Reusing Components

Lesson 011 Passing Data to Components with Props

Lesson 012 CSS Styling & CSS Modules

Lesson 013 Exercise & Another Component

Lesson 014 Preparing the App For State Management

Lesson 015 Adding Event Listeners

Lesson 016 Working with State

Lesson 017 Lifting State Up

Lesson 018 The Special children Prop

Lesson 019 State & Conditional Content

Lesson 020 Adding a Shared Header & More State Management

Lesson 021 Adding Form Buttons

Lesson 022 Handling Form Submission

Lesson 023 Updating State Based On Previous State

Lesson 024 Outputting List Data

Lesson 025 Adding a Backend to the React SPA

Lesson 026 Sending a POST HTTP Request

Lesson 027 Handling Side Effects with useEffect()

Lesson 028 Handle Loading State

Lesson 029 Understanding & Adding Routing

Lesson 030 Adding Routes

Lesson 031 Working with Layout Routes

Lesson 032 Refactoring Route Components & More Nesting

Lesson 033 Linking & Navigating

Lesson 034 Data Fetching via loader()s

Lesson 035 Submitting Data with action()s

Lesson 036 Dynamic Routes

Lesson 037 Module Summary

Lesson 039 Module Introduction

Lesson 040 What is ReactJS

Lesson 041 Why ReactJS & A First Demo

Lesson 042 Building Single-Page Applications (SPAs)

Lesson 043 React Alternatives

Lesson 044 Creating a New React Project

Lesson 045 Setting Up A Code Editor

Lesson 047 Diving Into The Created Project

Lesson 048 How React Works & Understanding Components

Lesson 049 More Component Work & Styling With CSS Classes

Lesson 050 Building & Re-using Components

Lesson 051 Passing Data With Props & Dynamic Content

Lesson 052 Handling Events

Lesson 053 Adding More Components

Lesson 054 Introducing State

Lesson 055 Working with Event Props

Lesson 057 Adding Routing

Lesson 058 Adding Links & Navigation

Lesson 059 Scoping Component Styles With CSS Modules

Lesson 060 Outputting Lists Of Data & Components

Lesson 061 Adding Even More Components

Lesson 062 Creating Wrapper Components

Lesson 063 Working With Forms

Lesson 064 Getting User Input & Handling Form Submission

Lesson 065 Preparing The App For Http Requests & Adding a Backend

Lesson 066 Sending a POST Http Request

Lesson 067 Navigating Programmatically

Lesson 068 Getting Started with Fetching Data

Lesson 069 Using the useEffect Hook

Lesson 070 Introducing React Context

Lesson 071 Updating State Based On Previous State

Lesson 072 Using Context In Components

Lesson 073 More Context Usage

Lesson 074 Module Summary

03 – NextJS Essentials (App Router)

0/46

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Setup

Lesson 003 Understanding File-based Routing & React Server Components

Lesson 004 Adding Another Route via the File System

Lesson 005 Navigating Between Pages – Wrong & Right Solution

Lesson 006 Working with Pages & Layouts

Lesson 007 Reserved File Names, Custom Components & How To Organize A NextJS Project

Lesson 009 Configuring Dynamic Routes & Using Route Parameters

Lesson 010 Onwards to the Main Project The Foodies App

Lesson 011 Exercise Your Task

Lesson 012 Exercise Solution

Lesson 013 Revisiting The Concept Of Layouts

Lesson 014 Adding a Custom Component To A Layout

Lesson 015 Styling NextJS Project Your Options & Using CSS Modules

Lesson 016 Optimizing Images with the NextJS Image Component

Lesson 017 Using More Custom Components

Lesson 018 Populating The Starting Page Content

Lesson 019 Preparing an Image Slideshow

Lesson 020 React Server Components vs Client Components – When To Use What

Lesson 021 Using Client Components Efficiently

Lesson 022 Outputting Meals Data & Images With Unknown Dimensions

Lesson 023 Setting Up A SQLite Database

Lesson 024 Fetching Data By Leveraging NextJS & Fullstack Capabilities

Lesson 025 Adding A Loading Page

Lesson 026 Using Suspense & Streamed Responses For Granular Loading State Management

Lesson 027 Handling Errors

Lesson 028 Handling Not Found States

Lesson 029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters

Lesson 030 Throwing Not Found Errors For Individual Meals

Lesson 031 Getting Started with the Share Meal Form

Lesson 032 Getting Started with a Custom Image Picker Input Component

Lesson 033 Adding an Image Preview to the Picker

Lesson 035 Introducing & Using Server Actions for Handling Form Submissions

Lesson 036 Storing Server Actions in Separate Files

Lesson 037 Creating a Slug & Sanitizing User Input for XSS Protection

Lesson 038 Storing Uploaded Images & Storing Data in the Database

Lesson 039 Managing the Form Submission Status with useFormStatus

Lesson 040 Adding Server-Side Input Validation

Lesson 042 Working with Server Action Responses & useFormState

Lesson 043 Building For Production & Understanding NextJS Caching

Lesson 044 Triggering Cache Revalidations

Lesson 045 Don’t Store Files Locally On The Filesystem!

Lesson 047 Adding Static Metadata

Lesson 048 Adding Dynamic Metadata

Lesson 049 Module Summary

04 – Routing & Page Rendering – Deep Dive

0/22

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Project Setup, Overview & An Exercise!

Lesson 003 Exercise Solution – Part 1

Lesson 004 Exercise Solution – Part 2

Lesson 005 App Styling & Using Dummy Data

Lesson 006 Handling Not Found Errors & Showing Not Found Pages

Lesson 007 Setting Up & Using Parallel Routes

Lesson 008 Working with Parallel Routes & Nested Routes

Lesson 009 Configuring Catch-All Routes

Lesson 010 Catch-All Fallback Routes & Dealing With Multiple Path Segments

Lesson 011 Throwing (Route-related) Errors

Lesson 012 Handling Errors With Error Pages

Lesson 013 Server vs Client Components

Lesson 014 Nested Routes Inside Dynamic Routes

Lesson 015 Intercepting Navigation & Using Interception Routes

Lesson 016 Combining Parallel & Intercepting Routes

Lesson 018 Navigating Programmatically

Lesson 019 Using & Understanding Route Groups

Lesson 020 Building APIs with Route Handlers

Lesson 021 Using Middleware

Lesson 022 Module Summary

05 – Data Fetching – Deep Dive

0/9

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Adding a Backend

Lesson 003 Option 1 Client-side Data Fetching

Lesson 004 Option 2 Server-side Data Fetching

Lesson 005 Why Use A Separate Backend Fetching Directly From The Source!

Lesson 006 Showing a Loading Fallback

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

Lesson 008 Granular Data Fetching With Suspense

06 – Mutating Data – Deep Dive

0/15

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Project & Analyzing Mutation Options

Lesson 003 Setting Up A Form Action

Lesson 004 Creating a Server Action

Lesson 005 Storing Data in Databases

Lesson 006 Providing User Feedback with The useFormStatus Hook

Lesson 008 Validating User Input With Help Of The useFormState Hook

Lesson 009 Adjusting Server Actions for useFormState

Lesson 010 Storing Server Actions In Separate Files

Lesson 012 Uploading & Storing Images

Lesson 013 Alternative Ways of Using, Configuring & Triggering Server Actions

Lesson 014 Revalidating Data To Avoid Caching Problems

Lesson 015 Performing Optimistic Updates With NextJS

Lesson 016 Caching Differences Development vs Production

07 – Understanding & Configuring Caching

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Making Sense of NextJS’ Caching Types

Lesson 003 Project Setup

Lesson 004 Handling Request Memoization

Lesson 005 Understanding The Data Cache & Cache Settings

Lesson 006 Controlling Data Caching

Lesson 007 Making Sense Of The Full Route Cache

Lesson 008 On-Demand Cache Invalidation with revalidatePath & revalidateTag

Lesson 009 Setting Up Request Memoization For Custom Data Sources

Lesson 010 Setting Up Data Caching For Custom Data Sources

Lesson 011 Invalidating Custom Data Source Data

Lesson 012 Module Summary

08 – NextJS App Optimizations

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Using the NextJS Image Component

Lesson 003 Understanding the NextJS Image Component

Lesson 004 Controlling the Image Size

Lesson 005 Working with Priority Images & More Settings

Lesson 006 Loading Unknown Images

Lesson 007 Configuring CSS For Images With The fill Prop

Lesson 008 Using An Image Loader & Cloudinary Resizing

Lesson 009 Page Metadata – An Introduction

Lesson 010 Configuring Static Page Metadata

Lesson 011 Configuring Dynamic Page Metadata

Lesson 012 Understanding Layout Metadata

09 – User Authentication

0/19

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Project Setup

Lesson 003 User Signup Extracting & Validating User Input

Lesson 004 Storing Users in a Database – The Wrong Way

Lesson 005 Hashing Passwords & Storing User Data The Right Way

Lesson 006 Checking for Email Duplication

Lesson 007 Theory How Does User Authentication Work

Lesson 008 Choosing a Third-Party Auth Package (Lucia)

Lesson 009 Creating a New Lucia Auth Instance

Lesson 010 Configuring A Session & A Session Cookie

Lesson 011 Setting Up An Auth Session

Lesson 012 Verifying An Active Auth Session

Lesson 013 Protecting Routes Against Unauthenticated Access

Lesson 014 Switching Auth Modes With Query Parameters (Search Params)

Lesson 015 Adding User Login (via a Server Action)

Lesson 016 Triggering Different Server Actions via Query Parameters

Lesson 017 Adding an Auth-only Layout

Lesson 019 Adding User Logout

10 – Roundup & Next Steps

0/2

Lesson 001 Course Roundup

Lesson 002 But There’s More NextJS Content!

11 – Pages & File-based Routing

0/18

Download Attachment

Lesson 001 From App Router To Pages Router

Lesson 003 Module Introduction

Lesson 004 Our Starting Setup

Lesson 005 What Is File-based Routing And Why Is It Helpful

Lesson 006 Adding A First Page

Lesson 007 Adding a Named Static Route File

Lesson 008 Working with Nested Paths & Routes

Lesson 009 Adding Dynamic Paths & Routes

Lesson 010 Extracting Dynamic Path Segment Data (Dynamic Routes)

Lesson 011 Building Nested Dynamic Routes & Paths

Lesson 012 Adding Catch-All Routes

Lesson 013 Navigating with the Link Component

Lesson 014 Navigating To Dynamic Routes

Lesson 015 A Different Way Of Setting Link Hrefs

Lesson 016 Navigating Programmatically

Lesson 017 Adding a Custom 404 Page

Lesson 018 Module Summary

12 – Project Time Working with File-based Routing

0/17

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Planning The Project

Lesson 003 Setting Up The Main Pages

Lesson 004 Adding Dummy Data & Static Files

Lesson 005 Adding Regular React Components

Lesson 006 Adding More React Components & Connecting Components

Lesson 007 Styling Components In Next.js Projects

Lesson 009 Adding Buttons & Icons

Lesson 010 Adding the Event Detail Page (Dynamic Route)

Lesson 011 Adding a General Layout Wrapper Component

Lesson 012 Working on the All Events Page

Lesson 013 Adding a Filter Form for Filtering Events

Lesson 014 Navigating to the Filtered Events Page Progammatically

Lesson 015 Extracting Data on the Catch-All Page

Lesson 016 Final Steps

Lesson 017 Module Summary

13 – Page Pre-Rendering & Data Fetching

0/29

Download Attachment

Lesson 001 Module Introduction

Lesson 002 The Problem With Traditional React Apps (and Data Fetching)

Lesson 003 How NextJS Prepares & Pre-renders Pages

Lesson 004 Introducing Static Generation with getStaticProps

Lesson 005 NextJS Pre-renders By Default!

Lesson 006 Adding getStaticProps To Pages

Lesson 007 Running Server-side Code & Using the Filesystem

Lesson 008 A Look Behind The Scenes

Lesson 009 Utilizing Incremental Static Generation (ISR)

Lesson 010 ISR A Look Behind The Scenes

Lesson 011 A Closer Look At getStaticProps & Configuration Options

Lesson 012 Working With Dynamic Parameters

Lesson 013 Introducing getStaticPaths For Dynamic Pages

Lesson 014 Using getStaticPaths

Lesson 015 getStaticPaths & Link Prefetching Behind The Scenes

Lesson 016 Working With Fallback Pages

Lesson 017 Loading Paths Dynamically

Lesson 018 Fallback Pages & Not Found Pages

Lesson 019 Introducing getServerSideProps for Server-side Rendering (SSR)

Lesson 020 Using getServerSideProps for Server-side Rendering

Lesson 021 getServerSideProps and its Context

Lesson 022 Dynamic Pages & getServerSideProps

Lesson 023 getServerSideProps Behind The Scenes

Lesson 024 Introducing Client-Side Data Fetching (And When To Use It)

Lesson 025 Implementing Client-Side Data Fetching

Lesson 027 Using the useSWR NextJS Hook

Lesson 028 Combining Pre-Fetching With Client-Side Fetching

Lesson 029 Module Summary

14 – Project Time Page Pre-rendering & Data Fetching

0/10

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Preparations

Lesson 003 Adding Static Site Generation (SSG) On The Home Page

Lesson 004 Loading Data & Paths For Dynamic Pages

Lesson 005 Optimizing Data Fetching

Lesson 006 Working on the All Events Page

Lesson 007 Using Server-side Rendering (SSR)

Lesson 008 Adding Client-Side Data Fetching

Lesson 009 Module Summary

15 – Optimizing NextJS Apps

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Analyzing the Need for head Metadata

Lesson 003 Configuring the head Content

Lesson 004 Adding Dynamic head Content

Lesson 005 Reusing Logic Inside A Component

Lesson 006 Working with the _app.js File (and Why)

Lesson 007 Merging head Content

Lesson 008 The _document.js File (And What It Does)

Lesson 009 A Closer Look At Our Images

Lesson 010 Optimizing Images with the Next Image Component & Feature

Lesson 011 Taking A Look At The Next Image Documentation

Lesson 012 Module Summary

16 – Adding Backend Code with API Routes (Fullstack React)

0/12

Download Attachment

Lesson 001 Module Introduction

Lesson 002 What are API Routes

Lesson 003 Writing Our First API Route

Lesson 004 Preparing the Frontend Form

Lesson 005 Parsing The Incoming Request & Executing Server-side Code

Lesson 006 Sending Requests To API Routes

Lesson 007 Using API Routes To Get Data

Lesson 008 Using API Routes For Pre-Rendering Pages

Lesson 009 Creating & Using Dynamic API Routes

Lesson 010 Exploring Different Ways Of Structuring API Route Files

Lesson 011 Module Summary

17 – Project Time API Routes

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Setup & A Challenge For You!

Lesson 003 Adding a Newsletter Route

Lesson 004 Adding Comments API Routes

Lesson 005 Connecting the Frontend To the Comments API Routes

Lesson 006 Setting Up A MongoDB Database

Lesson 007 Running MongoDB Queries From Inside API Routes

Lesson 008 Inserting Comments Into The Database

Lesson 009 Getting Data From The Database

Lesson 010 Adding Error Handling

Lesson 011 More Error Handling

Lesson 013 Module Summary

18 – Working with App-wide State (React Context)

0/10

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Our Target State & Starting Project

Lesson 003 Creating a New React Context

Lesson 004 Adding Context State

Lesson 005 Using Context Data In Components

Lesson 006 Example Triggering & Showing Notifications

Lesson 007 Example Removing Notifications (Automatically)

Lesson 008 Challenge Solution

Lesson 009 Module Summary

19 – Complete App Example Build a Full Blog A to Z

0/28

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Setting Up The Core Pages

Lesson 003 Getting Started With The Home Page

Lesson 004 Adding The Hero Component

Lesson 005 Adding Layout & Navigation

Lesson 006 Time To Add Styling & A Logo

Lesson 007 Starting Work On The Featured Posts Part

Lesson 008 Adding A Post Grid & Post Items

Lesson 009 Rendering Dummy Post Data

Lesson 010 Adding the All Posts Page

Lesson 011 Working On The Post Detail Page

Lesson 012 Rendering Markdown As JSX

Lesson 013 Adding Markdown Files As A Data Source

Lesson 014 Adding Functions To Read & Fetch Data From Markdown Files

Lesson 015 Using Markdown Data For Rendering Posts

Lesson 016 Rendering Dynamic Post Pages & Paths

Lesson 018 Rendering Images With The Next Image Component (From Markdown)

Lesson 019 Rendering Code Snippets From Markdown

Lesson 020 Preparing The Contact Form

Lesson 021 Adding The Contact API Route

Lesson 022 Sending Data From The Client To The API Route

Lesson 023 Storing Messages With MongoDB In A Database

Lesson 024 Adding UI Feedback With Notifications

Lesson 025 Adding head Data

Lesson 026 Adding A _document.js File

Lesson 027 Using React Portals

Lesson 028 Module Summary

20 – Deploying NextJS Apps

0/11

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Building NextJS Apps Your Options

Lesson 003 Key Deployment Steps

Lesson 004 Checking & Optimizing Our Code

Lesson 005 The NextJS Config File & Working With Environment Variables

Lesson 006 Running a Test Build & Reducing Code Size

Lesson 007 A Full Deployment Example (To Vercel)

Lesson 008 A Note On Github & Secret Credentials

Lesson 009 Using the export Feature

Lesson 010 Module Summary

21 – Adding Authentication

0/21

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Our Starting Project

Lesson 003 How Does Authentication Work (In React & NextJS Apps)

Lesson 005 Using The next-auth Library

Lesson 006 Adding A User Signup API Route

Lesson 007 Sending Signup Requests From The Frontend

Lesson 008 Improving Signup With Unique Email Addresses

Lesson 009 Adding the Credentials Auth Provider & User Login Logic

Lesson 010 Sending a Signin Request From The Frontend

Lesson 011 Managing Active Session (On The Frontend)

Lesson 012 Adding User Logout

Lesson 013 Adding Client-Side Page Guards (Route Protection)

Lesson 014 Adding Server-Side Page Guards (And When To Use Which Approach)

Lesson 015 Protecting the Auth Page

Lesson 016 Using the next-auth Session Provider Component

Lesson 017 Analyzing Further Authentication Requirements

Lesson 018 Protecting API Routes

Lesson 019 Adding the Change Password Logic

Lesson 020 Sending a Change Password Request From The Frontend

Lesson 021 Module Summary & Final Steps

22 – Optional NextJS Summary

0/30

Download Attachment

Lesson 001 Module Introduction

Lesson 002 What is NextJS

Lesson 003 Key Feature Server-side (Pre-) Rendering of Pages

Lesson 004 Key Feature File-based Routing

Lesson 005 Key Feature Build Fullstack Apps With Ease

Lesson 006 Creating a NextJS Project & IDE Setup

Lesson 007 About the App Router

Lesson 008 Analyzing the Created Project

Lesson 009 Adding First Pages To The Project

Lesson 010 Adding Nested Pages Paths

Lesson 011 Creating Dynamic Pages

Lesson 012 Extracting Dynamic Route Data

Lesson 013 Linking Between Pages

Lesson 014 Onwards To A Bigger Project!

Lesson 015 Preparing Our Project Pages

Lesson 016 Rendering A List Of (Dummy) Meetups

Lesson 017 Adding A Form For Adding Meetups

Lesson 018 The _app.js File & Wrapper Components

Lesson 019 Programmatic Navigation

Lesson 020 Adding Custom Components & Styling With CSS Modules

Lesson 021 How NextJS Page Pre-Rendering Actually Works

Lesson 022 Introducing Data Fetching For Page Generation (getStaticProps)

Lesson 023 More Static Site Generation (SSG) With getStaticProps

Lesson 024 Exploring getServerSideProps

Lesson 025 Working With Dynamic Path Params In getStaticProps

Lesson 026 Dynamic Pages & getStaticProps & getStaticPaths

Lesson 027 Introducing API Routes

Lesson 028 Connecting & Querying a MongoDB Database

Lesson 029 Sending HTTP Requests To API Routes

01 – Getting Started

0/9

Download Attachment

Lesson 001 Welcome To The Course!

Lesson 002 What Is NextJS Why Would You Use It

Lesson 003 Key Features & Benefits Of NextJS

Lesson 004 Creating a First NextJS App

Lesson 005 NextJS vs Just React – Analyzing The NextJS Project

Lesson 006 Editing The First App

Lesson 007 Pages Router vs App Router – One Framework, Two Approaches

Lesson 008 How To Get The Most Out Of This Course

02 – Optional React Refresher

0/71

Download Attachment

Lesson 002 Module Introduction

Lesson 003 What Is React & Why Would You Use It

Lesson 004 React Projects – Requirements

Lesson 005 Creating React Projects

Lesson 006 Our Starting Project

Lesson 007 Understanding How React Works

Lesson 008 Building A First Custom Component

Lesson 009 Outputting Dynamic Values

Lesson 010 Reusing Components

Lesson 011 Passing Data to Components with Props

Lesson 012 CSS Styling & CSS Modules

Lesson 013 Exercise & Another Component

Lesson 014 Preparing the App For State Management

Lesson 015 Adding Event Listeners

Lesson 016 Working with State

Lesson 017 Lifting State Up

Lesson 018 The Special children Prop

Lesson 019 State & Conditional Content

Lesson 020 Adding a Shared Header & More State Management

Lesson 021 Adding Form Buttons

Lesson 022 Handling Form Submission

Lesson 023 Updating State Based On Previous State

Lesson 024 Outputting List Data

Lesson 025 Adding a Backend to the React SPA

Lesson 026 Sending a POST HTTP Request

Lesson 027 Handling Side Effects with useEffect()

Lesson 028 Handle Loading State

Lesson 029 Understanding & Adding Routing

Lesson 030 Adding Routes

Lesson 031 Working with Layout Routes

Lesson 032 Refactoring Route Components & More Nesting

Lesson 033 Linking & Navigating

Lesson 034 Data Fetching via loader()s

Lesson 035 Submitting Data with action()s

Lesson 036 Dynamic Routes

Lesson 037 Module Summary

Lesson 039 Module Introduction

Lesson 040 What is ReactJS

Lesson 041 Why ReactJS & A First Demo

Lesson 042 Building Single-Page Applications (SPAs)

Lesson 043 React Alternatives

Lesson 044 Creating a New React Project

Lesson 045 Setting Up A Code Editor

Lesson 047 Diving Into The Created Project

Lesson 048 How React Works & Understanding Components

Lesson 049 More Component Work & Styling With CSS Classes

Lesson 050 Building & Re-using Components

Lesson 051 Passing Data With Props & Dynamic Content

Lesson 052 Handling Events

Lesson 053 Adding More Components

Lesson 054 Introducing State

Lesson 055 Working with Event Props

Lesson 057 Adding Routing

Lesson 058 Adding Links & Navigation

Lesson 059 Scoping Component Styles With CSS Modules

Lesson 060 Outputting Lists Of Data & Components

Lesson 061 Adding Even More Components

Lesson 062 Creating Wrapper Components

Lesson 063 Working With Forms

Lesson 064 Getting User Input & Handling Form Submission

Lesson 065 Preparing The App For Http Requests & Adding a Backend

Lesson 066 Sending a POST Http Request

Lesson 067 Navigating Programmatically

Lesson 068 Getting Started with Fetching Data

Lesson 069 Using the useEffect Hook

Lesson 070 Introducing React Context

Lesson 071 Updating State Based On Previous State

Lesson 072 Using Context In Components

Lesson 073 More Context Usage

Lesson 074 Module Summary

03 – NextJS Essentials (App Router)

0/46

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Setup

Lesson 003 Understanding File-based Routing & React Server Components

Lesson 004 Adding Another Route via the File System

Lesson 005 Navigating Between Pages – Wrong & Right Solution

Lesson 006 Working with Pages & Layouts

Lesson 007 Reserved File Names, Custom Components & How To Organize A NextJS Project

Lesson 009 Configuring Dynamic Routes & Using Route Parameters

Lesson 010 Onwards to the Main Project The Foodies App

Lesson 011 Exercise Your Task

Lesson 012 Exercise Solution

Lesson 013 Revisiting The Concept Of Layouts

Lesson 014 Adding a Custom Component To A Layout

Lesson 015 Styling NextJS Project Your Options & Using CSS Modules

Lesson 016 Optimizing Images with the NextJS Image Component

Lesson 017 Using More Custom Components

Lesson 018 Populating The Starting Page Content

Lesson 019 Preparing an Image Slideshow

Lesson 020 React Server Components vs Client Components – When To Use What

Lesson 021 Using Client Components Efficiently

Lesson 022 Outputting Meals Data & Images With Unknown Dimensions

Lesson 023 Setting Up A SQLite Database

Lesson 024 Fetching Data By Leveraging NextJS & Fullstack Capabilities

Lesson 025 Adding A Loading Page

Lesson 026 Using Suspense & Streamed Responses For Granular Loading State Management

Lesson 027 Handling Errors

Lesson 028 Handling Not Found States

Lesson 029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters

Lesson 030 Throwing Not Found Errors For Individual Meals

Lesson 031 Getting Started with the Share Meal Form

Lesson 032 Getting Started with a Custom Image Picker Input Component

Lesson 033 Adding an Image Preview to the Picker

Lesson 035 Introducing & Using Server Actions for Handling Form Submissions

Lesson 036 Storing Server Actions in Separate Files

Lesson 037 Creating a Slug & Sanitizing User Input for XSS Protection

Lesson 038 Storing Uploaded Images & Storing Data in the Database

Lesson 039 Managing the Form Submission Status with useFormStatus

Lesson 040 Adding Server-Side Input Validation

Lesson 042 Working with Server Action Responses & useFormState

Lesson 043 Building For Production & Understanding NextJS Caching

Lesson 044 Triggering Cache Revalidations

Lesson 045 Don’t Store Files Locally On The Filesystem!

Lesson 047 Adding Static Metadata

Lesson 048 Adding Dynamic Metadata

Lesson 049 Module Summary

04 – Routing & Page Rendering – Deep Dive

0/22

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Project Setup, Overview & An Exercise!

Lesson 003 Exercise Solution – Part 1

Lesson 004 Exercise Solution – Part 2

Lesson 005 App Styling & Using Dummy Data

Lesson 006 Handling Not Found Errors & Showing Not Found Pages

Lesson 007 Setting Up & Using Parallel Routes

Lesson 008 Working with Parallel Routes & Nested Routes

Lesson 009 Configuring Catch-All Routes

Lesson 010 Catch-All Fallback Routes & Dealing With Multiple Path Segments

Lesson 011 Throwing (Route-related) Errors

Lesson 012 Handling Errors With Error Pages

Lesson 013 Server vs Client Components

Lesson 014 Nested Routes Inside Dynamic Routes

Lesson 015 Intercepting Navigation & Using Interception Routes

Lesson 016 Combining Parallel & Intercepting Routes

Lesson 018 Navigating Programmatically

Lesson 019 Using & Understanding Route Groups

Lesson 020 Building APIs with Route Handlers

Lesson 021 Using Middleware

Lesson 022 Module Summary

05 – Data Fetching – Deep Dive

0/9

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Adding a Backend

Lesson 003 Option 1 Client-side Data Fetching

Lesson 004 Option 2 Server-side Data Fetching

Lesson 005 Why Use A Separate Backend Fetching Directly From The Source!

Lesson 006 Showing a Loading Fallback

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

Lesson 008 Granular Data Fetching With Suspense

06 – Mutating Data – Deep Dive

0/15

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Project & Analyzing Mutation Options

Lesson 003 Setting Up A Form Action

Lesson 004 Creating a Server Action

Lesson 005 Storing Data in Databases

Lesson 006 Providing User Feedback with The useFormStatus Hook

Lesson 008 Validating User Input With Help Of The useFormState Hook

Lesson 009 Adjusting Server Actions for useFormState

Lesson 010 Storing Server Actions In Separate Files

Lesson 012 Uploading & Storing Images

Lesson 013 Alternative Ways of Using, Configuring & Triggering Server Actions

Lesson 014 Revalidating Data To Avoid Caching Problems

Lesson 015 Performing Optimistic Updates With NextJS

Lesson 016 Caching Differences Development vs Production

07 – Understanding & Configuring Caching

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Making Sense of NextJS’ Caching Types

Lesson 003 Project Setup

Lesson 004 Handling Request Memoization

Lesson 005 Understanding The Data Cache & Cache Settings

Lesson 006 Controlling Data Caching

Lesson 007 Making Sense Of The Full Route Cache

Lesson 008 On-Demand Cache Invalidation with revalidatePath & revalidateTag

Lesson 009 Setting Up Request Memoization For Custom Data Sources

Lesson 010 Setting Up Data Caching For Custom Data Sources

Lesson 011 Invalidating Custom Data Source Data

Lesson 012 Module Summary

08 – NextJS App Optimizations

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Using the NextJS Image Component

Lesson 003 Understanding the NextJS Image Component

Lesson 004 Controlling the Image Size

Lesson 005 Working with Priority Images & More Settings

Lesson 006 Loading Unknown Images

Lesson 007 Configuring CSS For Images With The fill Prop

Lesson 008 Using An Image Loader & Cloudinary Resizing

Lesson 009 Page Metadata – An Introduction

Lesson 010 Configuring Static Page Metadata

Lesson 011 Configuring Dynamic Page Metadata

Lesson 012 Understanding Layout Metadata

09 – User Authentication

0/19

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Project Setup

Lesson 003 User Signup Extracting & Validating User Input

Lesson 004 Storing Users in a Database – The Wrong Way

Lesson 005 Hashing Passwords & Storing User Data The Right Way

Lesson 006 Checking for Email Duplication

Lesson 007 Theory How Does User Authentication Work

Lesson 008 Choosing a Third-Party Auth Package (Lucia)

Lesson 009 Creating a New Lucia Auth Instance

Lesson 010 Configuring A Session & A Session Cookie

Lesson 011 Setting Up An Auth Session

Lesson 012 Verifying An Active Auth Session

Lesson 013 Protecting Routes Against Unauthenticated Access

Lesson 014 Switching Auth Modes With Query Parameters (Search Params)

Lesson 015 Adding User Login (via a Server Action)

Lesson 016 Triggering Different Server Actions via Query Parameters

Lesson 017 Adding an Auth-only Layout

Lesson 019 Adding User Logout

10 – Roundup & Next Steps

0/2

Lesson 001 Course Roundup

Lesson 002 But There’s More NextJS Content!

11 – Pages & File-based Routing

0/18

Download Attachment

Lesson 001 From App Router To Pages Router

Lesson 003 Module Introduction

Lesson 004 Our Starting Setup

Lesson 005 What Is File-based Routing And Why Is It Helpful

Lesson 006 Adding A First Page

Lesson 007 Adding a Named Static Route File

Lesson 008 Working with Nested Paths & Routes

Lesson 009 Adding Dynamic Paths & Routes

Lesson 010 Extracting Dynamic Path Segment Data (Dynamic Routes)

Lesson 011 Building Nested Dynamic Routes & Paths

Lesson 012 Adding Catch-All Routes

Lesson 013 Navigating with the Link Component

Lesson 014 Navigating To Dynamic Routes

Lesson 015 A Different Way Of Setting Link Hrefs

Lesson 016 Navigating Programmatically

Lesson 017 Adding a Custom 404 Page

Lesson 018 Module Summary

12 – Project Time Working with File-based Routing

0/17

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Planning The Project

Lesson 003 Setting Up The Main Pages

Lesson 004 Adding Dummy Data & Static Files

Lesson 005 Adding Regular React Components

Lesson 006 Adding More React Components & Connecting Components

Lesson 007 Styling Components In Next.js Projects

Lesson 009 Adding Buttons & Icons

Lesson 010 Adding the Event Detail Page (Dynamic Route)

Lesson 011 Adding a General Layout Wrapper Component

Lesson 012 Working on the All Events Page

Lesson 013 Adding a Filter Form for Filtering Events

Lesson 014 Navigating to the Filtered Events Page Progammatically

Lesson 015 Extracting Data on the Catch-All Page

Lesson 016 Final Steps

Lesson 017 Module Summary

13 – Page Pre-Rendering & Data Fetching

0/29

Download Attachment

Lesson 001 Module Introduction

Lesson 002 The Problem With Traditional React Apps (and Data Fetching)

Lesson 003 How NextJS Prepares & Pre-renders Pages

Lesson 004 Introducing Static Generation with getStaticProps

Lesson 005 NextJS Pre-renders By Default!

Lesson 006 Adding getStaticProps To Pages

Lesson 007 Running Server-side Code & Using the Filesystem

Lesson 008 A Look Behind The Scenes

Lesson 009 Utilizing Incremental Static Generation (ISR)

Lesson 010 ISR A Look Behind The Scenes

Lesson 011 A Closer Look At getStaticProps & Configuration Options

Lesson 012 Working With Dynamic Parameters

Lesson 013 Introducing getStaticPaths For Dynamic Pages

Lesson 014 Using getStaticPaths

Lesson 015 getStaticPaths & Link Prefetching Behind The Scenes

Lesson 016 Working With Fallback Pages

Lesson 017 Loading Paths Dynamically

Lesson 018 Fallback Pages & Not Found Pages

Lesson 019 Introducing getServerSideProps for Server-side Rendering (SSR)

Lesson 020 Using getServerSideProps for Server-side Rendering

Lesson 021 getServerSideProps and its Context

Lesson 022 Dynamic Pages & getServerSideProps

Lesson 023 getServerSideProps Behind The Scenes

Lesson 024 Introducing Client-Side Data Fetching (And When To Use It)

Lesson 025 Implementing Client-Side Data Fetching

Lesson 027 Using the useSWR NextJS Hook

Lesson 028 Combining Pre-Fetching With Client-Side Fetching

Lesson 029 Module Summary

14 – Project Time Page Pre-rendering & Data Fetching

0/10

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Preparations

Lesson 003 Adding Static Site Generation (SSG) On The Home Page

Lesson 004 Loading Data & Paths For Dynamic Pages

Lesson 005 Optimizing Data Fetching

Lesson 006 Working on the All Events Page

Lesson 007 Using Server-side Rendering (SSR)

Lesson 008 Adding Client-Side Data Fetching

Lesson 009 Module Summary

15 – Optimizing NextJS Apps

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Analyzing the Need for head Metadata

Lesson 003 Configuring the head Content

Lesson 004 Adding Dynamic head Content

Lesson 005 Reusing Logic Inside A Component

Lesson 006 Working with the _app.js File (and Why)

Lesson 007 Merging head Content

Lesson 008 The _document.js File (And What It Does)

Lesson 009 A Closer Look At Our Images

Lesson 010 Optimizing Images with the Next Image Component & Feature

Lesson 011 Taking A Look At The Next Image Documentation

Lesson 012 Module Summary

16 – Adding Backend Code with API Routes (Fullstack React)

0/12

Download Attachment

Lesson 001 Module Introduction

Lesson 002 What are API Routes

Lesson 003 Writing Our First API Route

Lesson 004 Preparing the Frontend Form

Lesson 005 Parsing The Incoming Request & Executing Server-side Code

Lesson 006 Sending Requests To API Routes

Lesson 007 Using API Routes To Get Data

Lesson 008 Using API Routes For Pre-Rendering Pages

Lesson 009 Creating & Using Dynamic API Routes

Lesson 010 Exploring Different Ways Of Structuring API Route Files

Lesson 011 Module Summary

17 – Project Time API Routes

0/13

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Starting Setup & A Challenge For You!

Lesson 003 Adding a Newsletter Route

Lesson 004 Adding Comments API Routes

Lesson 005 Connecting the Frontend To the Comments API Routes

Lesson 006 Setting Up A MongoDB Database

Lesson 007 Running MongoDB Queries From Inside API Routes

Lesson 008 Inserting Comments Into The Database

Lesson 009 Getting Data From The Database

Lesson 010 Adding Error Handling

Lesson 011 More Error Handling

Lesson 013 Module Summary

18 – Working with App-wide State (React Context)

0/10

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Our Target State & Starting Project

Lesson 003 Creating a New React Context

Lesson 004 Adding Context State

Lesson 005 Using Context Data In Components

Lesson 006 Example Triggering & Showing Notifications

Lesson 007 Example Removing Notifications (Automatically)

Lesson 008 Challenge Solution

Lesson 009 Module Summary

19 – Complete App Example Build a Full Blog A to Z

0/28

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Setting Up The Core Pages

Lesson 003 Getting Started With The Home Page

Lesson 004 Adding The Hero Component

Lesson 005 Adding Layout & Navigation

Lesson 006 Time To Add Styling & A Logo

Lesson 007 Starting Work On The Featured Posts Part

Lesson 008 Adding A Post Grid & Post Items

Lesson 009 Rendering Dummy Post Data

Lesson 010 Adding the All Posts Page

Lesson 011 Working On The Post Detail Page

Lesson 012 Rendering Markdown As JSX

Lesson 013 Adding Markdown Files As A Data Source

Lesson 014 Adding Functions To Read & Fetch Data From Markdown Files

Lesson 015 Using Markdown Data For Rendering Posts

Lesson 016 Rendering Dynamic Post Pages & Paths

Lesson 018 Rendering Images With The Next Image Component (From Markdown)

Lesson 019 Rendering Code Snippets From Markdown

Lesson 020 Preparing The Contact Form

Lesson 021 Adding The Contact API Route

Lesson 022 Sending Data From The Client To The API Route

Lesson 023 Storing Messages With MongoDB In A Database

Lesson 024 Adding UI Feedback With Notifications

Lesson 025 Adding head Data

Lesson 026 Adding A _document.js File

Lesson 027 Using React Portals

Lesson 028 Module Summary

20 – Deploying NextJS Apps

0/11

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Building NextJS Apps Your Options

Lesson 003 Key Deployment Steps

Lesson 004 Checking & Optimizing Our Code

Lesson 005 The NextJS Config File & Working With Environment Variables

Lesson 006 Running a Test Build & Reducing Code Size

Lesson 007 A Full Deployment Example (To Vercel)

Lesson 008 A Note On Github & Secret Credentials

Lesson 009 Using the export Feature

Lesson 010 Module Summary

21 – Adding Authentication

0/21

Download Attachment

Lesson 001 Module Introduction

Lesson 002 Our Starting Project

Lesson 003 How Does Authentication Work (In React & NextJS Apps)

Lesson 005 Using The next-auth Library

Lesson 006 Adding A User Signup API Route

Lesson 007 Sending Signup Requests From The Frontend

Lesson 008 Improving Signup With Unique Email Addresses

Lesson 009 Adding the Credentials Auth Provider & User Login Logic

Lesson 010 Sending a Signin Request From The Frontend

Lesson 011 Managing Active Session (On The Frontend)

Lesson 012 Adding User Logout

Lesson 013 Adding Client-Side Page Guards (Route Protection)

Lesson 014 Adding Server-Side Page Guards (And When To Use Which Approach)

Lesson 015 Protecting the Auth Page

Lesson 016 Using the next-auth Session Provider Component

Lesson 017 Analyzing Further Authentication Requirements

Lesson 018 Protecting API Routes

Lesson 019 Adding the Change Password Logic

Lesson 020 Sending a Change Password Request From The Frontend

Lesson 021 Module Summary & Final Steps

22 – Optional NextJS Summary

0/30

Download Attachment

Lesson 001 Module Introduction

Lesson 002 What is NextJS

Lesson 003 Key Feature Server-side (Pre-) Rendering of Pages

Lesson 004 Key Feature File-based Routing

Lesson 005 Key Feature Build Fullstack Apps With Ease

Lesson 006 Creating a NextJS Project & IDE Setup

Lesson 007 About the App Router

Lesson 008 Analyzing the Created Project

Lesson 009 Adding First Pages To The Project

Lesson 010 Adding Nested Pages Paths

Lesson 011 Creating Dynamic Pages

Lesson 012 Extracting Dynamic Route Data

Lesson 013 Linking Between Pages

Lesson 014 Onwards To A Bigger Project!

Lesson 015 Preparing Our Project Pages

Lesson 016 Rendering A List Of (Dummy) Meetups

Lesson 017 Adding A Form For Adding Meetups

Lesson 018 The _app.js File & Wrapper Components

Lesson 019 Programmatic Navigation

Lesson 020 Adding Custom Components & Styling With CSS Modules

Lesson 021 How NextJS Page Pre-Rendering Actually Works

Lesson 022 Introducing Data Fetching For Page Generation (getStaticProps)

Lesson 023 More Static Site Generation (SSG) With getStaticProps

Lesson 024 Exploring getServerSideProps

Lesson 025 Working With Dynamic Path Params In getStaticProps

Lesson 026 Dynamic Pages & getStaticProps & getStaticPaths

Lesson 027 Introducing API Routes

Lesson 028 Connecting & Querying a MongoDB Database

Lesson 029 Sending HTTP Requests To API Routes

Next.js 15 & React – The Complete Guide

Download Attachment: Click here

Please contact me via telegram

DMCA.com Protection Status

Quick Links

About us
Contact
Privacy Policy
Terms and Conditions
DCMA
Disclaimer
Search for:

Resource

Course List
Recommend New Courses
For IT Students
Search for:

© 2024 - freestudy247.com