Next.js 14 & React - The Complete Guide

About Course

Learn Next.js 14 & React – The Complete Guide from Udemy for free! This comprehensive course covers everything from the basics to advanced concepts, enabling you to build highly dynamic, fast, and SEO-ready React apps with Next.js.

Master the “App Router” and “Pages Router” in Next.js 14, understand their differences, and build full-stack React applications.

This course is perfect for React developers looking to take their skills to the next level.

Next.js is a production-ready, full-stack framework built on top of React, the most popular JavaScript library.

With Next.js, you can leverage built-in server-side rendering and page pre-rendering to enhance user experience and SEO. It also simplifies building full-stack applications, blending client-side and server-side code.

This course covers topics such as:

Fundamentals of Next.js
File-based Routing
Dynamic Routing and Catch-All Routes
Page Pre-Rendering and Server-Side Rendering
Data Fetching and Pre-fetching
Handling Form Submissions
File Upload
Pre-generating Static and Dynamic Pages
Image Optimization with Next.js Image Component
Building Full-Stack Apps with API Routes or Server Actions
Managing App-Wide State with React Context
Adding Authentication to Next.js Apps
Complete Real-World Projects to Apply Concepts
React Refresher Module
Next.js Summary Module

Get started for free today and become a Next.js expert!

This course is offered for free on Theetay, a website that provides access to top-rated online courses from platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and more.

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

Course Content

01 – Getting Started

A Message from the Professor
001 Welcome To The Course!.mp4

00:00
002 What Is NextJS Why Would You Use It.mp4

00:00
003 Key Features & Benefits Of NextJS.mp4

00:00
004 Creating a First NextJS App.mp4

00:00
005 NextJS vs Just React – Analyzing The NextJS Project.mp4

00:00
006 Editing The First App.mp4

00:00
007 Pages Router vs App Router – One Framework, Two Approaches.mp4

00:00
008 How To Get The Most Out Of This Course.mp4

00:00
009 Learning Community & Course Resources.html

00:00
external-links.txt

00:00
Section Quiz

02 – Optional React Refresher

001 Using the Code Snasphots.html

00:00
002 Module Introduction.mp4

00:00
003 What Is React & Why Would You Use It.mp4

00:00
004 React Projects – Requirements.mp4

00:00
005 Creating React Projects.mp4

00:00
006 Our Starting Project.mp4

00:00
007 Understanding How React Works.mp4

00:00
008 Building A First Custom Component.mp4

00:00
009 Outputting Dynamic Values.mp4

00:00
010 Reusing Components.mp4

00:00
011 Passing Data to Components with Props.mp4

00:00
012 CSS Styling & CSS Modules.mp4

00:00
013 Exercise & Another Component.mp4

00:00
014 Preparing the App For State Management.mp4

00:00
015 Adding Event Listeners.mp4

00:00
016 Working with State.mp4

00:00
017 Lifting State Up.mp4

00:00
018 The Special children Prop.mp4

00:00
019 State & Conditional Content.mp4

00:00
020 Adding a Shared Header & More State Management.mp4

00:00
021 Adding Form Buttons.mp4

00:00
022 Handling Form Submission.mp4

00:00
023 Updating State Based On Previous State.mp4

00:00
024 Outputting List Data.mp4

00:00
025 Adding a Backend to the React SPA.mp4

00:00
026 Sending a POST HTTP Request.mp4

00:00
027 Handling Side Effects with useEffect().mp4

00:00
028 Handle Loading State.mp4

00:00
029 Understanding & Adding Routing.mp4

00:00
030 Adding Routes.mp4

00:00
031 Working with Layout Routes.mp4

00:00
032 Refactoring Route Components & More Nesting.mp4

00:00
033 Linking & Navigating.mp4

00:00
034 Data Fetching via loader()s.mp4

00:00
035 Submitting Data with action()s.mp4

00:00
036 Dynamic Routes.mp4

00:00
037 Module Summary.mp4

00:00
038 IMPORTANT — LEGACY CONTENT BELOW.html

00:00
039 Module Introduction.mp4

00:00
040 What is ReactJS.mp4

00:00
041 Why ReactJS & A First Demo.mp4

00:00
042 Building Single-Page Applications (SPAs).mp4

00:00
043 React Alternatives.mp4

00:00
044 Creating a New React Project.mp4

00:00
045 Setting Up A Code Editor.mp4

00:00
046 React 18.html

00:00
047 Diving Into The Created Project.mp4

00:00
048 How React Works & Understanding Components.mp4

00:00
049 More Component Work & Styling With CSS Classes.mp4

00:00
050 Building & Re-using Components.mp4

00:00
051 Passing Data With Props & Dynamic Content.mp4

00:00
052 Handling Events.mp4

00:00
053 Adding More Components.mp4

00:00
054 Introducing State.mp4

00:00
055 Working with Event Props.mp4

00:00
056 Use The Right React Router Version.html

00:00
057 Adding Routing.mp4

00:00
058 Adding Links & Navigation.mp4

00:00
059 Scoping Component Styles With CSS Modules.mp4

00:00
060 Outputting Lists Of Data & Components.mp4

00:00
061 Adding Even More Components.mp4

00:00
062 Creating Wrapper Components.mp4

00:00
063 Working With Forms.mp4

00:00
064 Getting User Input & Handling Form Submission.mp4

00:00
065 Preparing The App For Http Requests & Adding a Backend.mp4

00:00
066 Sending a POST Http Request.mp4

00:00
067 Navigating Programmatically.mp4

00:00
068 Getting Started with Fetching Data.mp4

00:00
069 Using the useEffect Hook.mp4

00:00
070 Introducing React Context.mp4

00:00
071 Updating State Based On Previous State.mp4

00:00
072 Using Context In Components.mp4

00:00
073 More Context Usage.mp4

00:00
074 Module Summary.mp4

00:00
075 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

03 – NextJS Essentials (App Router)

001 Module Introduction.mp4

00:00
002 Starting Setup.mp4

00:00
003 Understanding File-based Routing & React Server Components.mp4

00:00
004 Adding Another Route via the File System.mp4

00:00
005 Navigating Between Pages – Wrong & Right Solution.mp4

00:00
006 Working with Pages & Layouts.mp4

00:00
007 Reserved File Names, Custom Components & How To Organize A NextJS Project.mp4

00:00
008 Reserved Filenames.html

00:00
009 Configuring Dynamic Routes & Using Route Parameters.mp4

00:00
010 Onwards to the Main Project The Foodies App.mp4

00:00
011 Exercise Your Task.mp4

00:00
012 Exercise Solution.mp4

00:00
013 Revisiting The Concept Of Layouts.mp4

00:00
014 Adding a Custom Component To A Layout.mp4

00:00
015 Styling NextJS Project Your Options & Using CSS Modules.mp4

00:00
016 Optimizing Images with the NextJS Image Component.mp4

00:00
017 Using More Custom Components.mp4

00:00
018 Populating The Starting Page Content.mp4

00:00
019 Preparing an Image Slideshow.mp4

00:00
020 React Server Components vs Client Components – When To Use What.mp4

00:00
021 Using Client Components Efficiently.mp4

00:00
022 Outputting Meals Data & Images With Unknown Dimensions.mp4

00:00
023 Setting Up A SQLite Database.mp4

00:00
024 Fetching Data By Leveraging NextJS & Fullstack Capabilities.mp4

00:00
025 Adding A Loading Page.mp4

00:00
026 Using Suspense & Streamed Responses For Granular Loading State Management.mp4

00:00
027 Handling Errors.mp4

00:00
028 Handling Not Found States.mp4

00:00
029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters.mp4

00:00
030 Throwing Not Found Errors For Individual Meals.mp4

00:00
031 Getting Started with the Share Meal Form.mp4

00:00
032 Getting Started with a Custom Image Picker Input Component.mp4

00:00
033 Adding an Image Preview to the Picker.mp4

00:00
034 Improving the Image Picker Component.html

00:00
035 Introducing & Using Server Actions for Handling Form Submissions.mp4

00:00
036 Storing Server Actions in Separate Files.mp4

00:00
037 Creating a Slug & Sanitizing User Input for XSS Protection.mp4

00:00
038 Storing Uploaded Images & Storing Data in the Database.mp4

00:00
039 Managing the Form Submission Status with useFormStatus.mp4

00:00
040 Adding Server-Side Input Validation.mp4

00:00
041 Working with Server Action Responses & useFormState.mp4

00:00
042 Building For Production & Understanding NextJS Caching.mp4

00:00
043 Triggering Cache Revalidations.mp4

00:00
044 Don’t Store Files Locally On The Filesystem!.mp4

00:00
045 Bonus Storing Uploaded Images In The Cloud (AWS S3).html

00:00
046 Adding Static Metadata.mp4

00:00
047 Adding Dynamic Metadata.mp4

00:00
048 Module Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

04 – Routing & Page Rendering – Deep Dive

001 Module Introduction.mp4

00:00
002 Project Setup, Overview & An Exercise!.mp4

00:00
003 Exercise Solution – Part 1.mp4

00:00
004 Exercise Solution – Part 2.mp4

00:00
005 App Styling & Using Dummy Data.mp4

00:00
006 Handling Not Found Errors & Showing Not Found Pages.mp4

00:00
007 Setting Up & Using Parallel Routes.mp4

00:00
008 Working with Parallel Routes & Nested Routes.mp4

00:00
009 Configuring Catch-All Routes.mp4

00:00
010 Catch-All Fallback Routes & Dealing With Multiple Path Segments.mp4

00:00
011 Throwing (Route-related) Errors.mp4

00:00
012 Handling Errors With Error Pages.mp4

00:00
013 Server vs Client Components.mp4

00:00
014 Nested Routes Inside Dynamic Routes.mp4

00:00
015 Intercepting Navigation & Using Interception Routes.mp4

00:00
016 Combining Parallel & Intercepting Routes.mp4

00:00
017 Navigating Programmatically.mp4

00:00
018 Using & Understanding Route Groups.mp4

00:00
019 Building APIs with Route Handlers.mp4

00:00
020 Using Middleware.mp4

00:00
021 Module Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

05 – Data Fetching – Deep Dive

001 Module Introduction.mp4

00:00
002 Adding a Backend.mp4

00:00
003 Option 1 Client-side Data Fetching.mp4

00:00
004 Option 2 Server-side Data Fetching.mp4

00:00
005 Why Use A Separate Backend Fetching Directly From The Source!.mp4

00:00
006 Showing a Loading Fallback.mp4

00:00
007 Migrating An Entire Application To A Local Data Source (Database).mp4

00:00
008 Granular Data Fetching With Suspense.mp4

00:00
external-links.txt

00:00
Section Quiz

06 – Mutating Data – Deep Dive

001 Module Introduction.mp4

00:00
002 Starting Project & Analyzing Mutation Options.mp4

00:00
003 Setting Up A Form Action.mp4

00:00
004 Creating a Server Action.mp4

00:00
005 Storing Data in Databases.mp4

00:00
006 Providing User Feedback with The useFormStatus Hook.mp4

00:00
007 Validating User Input With Help Of The useFormState Hook.mp4

00:00
008 Adjusting Server Actions for useFormState.mp4

00:00
009 Storing Server Actions In Separate Files.mp4

00:00
010 use server Does Not Guarantee Server-side Execution!.html

00:00
011 Preparing the App For Cloudinary Image Upload & Serving.html

00:00
012 Uploading & Storing Images.mp4

00:00
013 Alternative Ways of Using, Configuring & Triggering Server Actions.mp4

00:00
014 Revalidating Data To Avoid Caching Problems.mp4

00:00
015 Performing Optimistic Updates With NextJS.mp4

00:00
016 Caching Differences Development vs Production.mp4

00:00
external-links.txt

00:00
Section Quiz

07 – Understanding & Configuring Caching

001 Module Introduction.mp4

00:00
002 Making Sense of NextJS’ Caching Types.mp4

00:00
003 Project Setup.mp4

00:00
004 Handling Request Memoization.mp4

00:00
005 Understanding The Data Cache & Cache Settings.mp4

00:00
006 Controlling Data Caching.mp4

00:00
007 Making Sense Of The Full Route Cache.mp4

00:00
008 On-Demand Cache Invalidation with revalidatePath & revalidateTag.mp4

00:00
009 Setting Up Request Memoization For Custom Data Sources.mp4

00:00
010 Setting Up Data Caching For Custom Data Sources.mp4

00:00
011 Invalidating Custom Data Source Data.mp4

00:00
012 Module Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

08 – NextJS App Optimizations

001 Module Introduction.mp4

00:00
002 Using the NextJS Image Component.mp4

00:00
003 Understanding the NextJS Image Component.mp4

00:00
004 Controlling the Image Size.mp4

00:00
005 Working with Priority Images & More Settings.mp4

00:00
006 Loading Unknown Images.mp4

00:00
007 Configuring CSS For Images With The fill Prop.mp4

00:00
008 Using An Image Loader & Cloudinary Resizing.mp4

00:00
009 Page Metadata – An Introduction.mp4

00:00
010 Configuring Static Page Metadata.mp4

00:00
011 Configuring Dynamic Page Metadata.mp4

00:00
012 Understanding Layout Metadata.mp4

00:00
external-links.txt

00:00
Section Quiz

09 – User Authentication

001 Module Introduction.mp4

00:00
002 Project Setup.mp4

00:00
003 User Signup Extracting & Validating User Input.mp4

00:00
004 Storing Users in a Database – The Wrong Way.mp4

00:00
005 Hashing Passwords & Storing User Data The Right Way.mp4

00:00
006 Checking for Email Duplication.mp4

00:00
007 Theory How Does User Authentication Work.mp4

00:00
008 Choosing a Third-Party Auth Package (Lucia).mp4

00:00
009 Creating a New Lucia Auth Instance.mp4

00:00
010 Configuring A Session & A Session Cookie.mp4

00:00
011 Setting Up An Auth Session.mp4

00:00
012 Verifying An Active Auth Session.mp4

00:00
013 Protecting Routes Against Unauthenticated Access.mp4

00:00
014 Switching Auth Modes With Query Parameters (Search Params).mp4

00:00
015 Adding User Login (via a Server Action).mp4

00:00
016 Triggering Different Server Actions via Query Parameters.mp4

00:00
017 Adding an Auth-only Layout.mp4

00:00
018 One Root Layout vs Multiple Root Layouts.html

00:00
019 Adding User Logout.mp4

00:00
external-links.txt

00:00
Section Quiz

10 – Roundup & Next Steps

11 – Pages & File-based Routing

001 From App Router To Pages Router.mp4

00:00
002 Using The Code Snapshots.html

00:00
003 Module Introduction.mp4

00:00
004 Our Starting Setup.mp4

00:00
005 What Is File-based Routing And Why Is It Helpful.mp4

00:00
006 Adding A First Page.mp4

00:00
007 Adding a Named Static Route File.mp4

00:00
008 Working with Nested Paths & Routes.mp4

00:00
009 Adding Dynamic Paths & Routes.mp4

00:00
010 Extracting Dynamic Path Segment Data (Dynamic Routes).mp4

00:00
011 Building Nested Dynamic Routes & Paths.mp4

00:00
012 Adding Catch-All Routes.mp4

00:00
013 Navigating with the Link Component.mp4

00:00
014 Navigating To Dynamic Routes.mp4

00:00
015 A Different Way Of Setting Link Hrefs.mp4

00:00
016 Navigating Programmatically.mp4

00:00
017 Adding a Custom 404 Page.mp4

00:00
018 Module Summary.mp4

00:00
019 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

12 – Project Time Working with File-based Routing

001 Module Introduction.mp4

00:00
002 Planning The Project.mp4

00:00
003 Setting Up The Main Pages.mp4

00:00
004 Adding Dummy Data & Static Files.mp4

00:00
005 Adding Regular React Components.mp4

00:00
006 Adding More React Components & Connecting Components.mp4

00:00
007 Styling Components In Next.js Projects.mp4

00:00
008 Link & NextJS 13.html

00:00
009 Adding Buttons & Icons.mp4

00:00
010 Adding the Event Detail Page (Dynamic Route).mp4

00:00
011 Adding a General Layout Wrapper Component.mp4

00:00
012 Working on the All Events Page.mp4

00:00
013 Adding a Filter Form for Filtering Events.mp4

00:00
014 Navigating to the Filtered Events Page Progammatically.mp4

00:00
015 Extracting Data on the Catch-All Page.mp4

00:00
016 Final Steps.mp4

00:00
017 Module Summary.mp4

00:00
018 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

13 – Page Pre-Rendering & Data Fetching

001 Module Introduction.mp4

00:00
002 The Problem With Traditional React Apps (and Data Fetching).mp4

00:00
003 How NextJS Prepares & Pre-renders Pages.mp4

00:00
004 Introducing Static Generation with getStaticProps.mp4

00:00
005 NextJS Pre-renders By Default!.mp4

00:00
006 Adding getStaticProps To Pages.mp4

00:00
007 Running Server-side Code & Using the Filesystem.mp4

00:00
008 A Look Behind The Scenes.mp4

00:00
009 Utilizing Incremental Static Generation (ISR).mp4

00:00
010 ISR A Look Behind The Scenes.mp4

00:00
011 A Closer Look At getStaticProps & Configuration Options.mp4

00:00
012 Working With Dynamic Parameters.mp4

00:00
013 Introducing getStaticPaths For Dynamic Pages.mp4

00:00
014 Using getStaticPaths.mp4

00:00
015 getStaticPaths & Link Prefetching Behind The Scenes.mp4

00:00
016 Working With Fallback Pages.mp4

00:00
017 Loading Paths Dynamically.mp4

00:00
018 Fallback Pages & Not Found Pages.mp4

00:00
019 Introducing getServerSideProps for Server-side Rendering (SSR).mp4

00:00
020 Using getServerSideProps for Server-side Rendering.mp4

00:00
021 getServerSideProps and its Context.mp4

00:00
022 Dynamic Pages & getServerSideProps.mp4

00:00
023 getServerSideProps Behind The Scenes.mp4

00:00
024 Introducing Client-Side Data Fetching (And When To Use It).mp4

00:00
025 Implementing Client-Side Data Fetching.mp4

00:00
026 A Note About useSWR.html

00:00
027 Using the useSWR NextJS Hook.mp4

00:00
028 Combining Pre-Fetching With Client-Side Fetching.mp4

00:00
029 Module Summary.mp4

00:00
030 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

14 – Project Time Page Pre-rendering & Data Fetching

001 Module Introduction.mp4

00:00
002 Preparations.mp4

00:00
003 Adding Static Site Generation (SSG) On The Home Page.mp4

00:00
004 Loading Data & Paths For Dynamic Pages.mp4

00:00
005 Optimizing Data Fetching.mp4

00:00
006 Working on the All Events Page.mp4

00:00
007 Using Server-side Rendering (SSR).mp4

00:00
008 Adding Client-Side Data Fetching.mp4

00:00
009 Module Summary.mp4

00:00
010 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

15 – Optimizing NextJS Apps

001 Module Introduction.mp4

00:00
002 Analyzing the Need for head Metadata.mp4

00:00
003 Configuring the head Content.mp4

00:00
004 Adding Dynamic head Content.mp4

00:00
005 Reusing Logic Inside A Component.mp4

00:00
006 Working with the _app.js File (and Why).mp4

00:00
007 Merging head Content.mp4

00:00
008 The _document.js File (And What It Does).mp4

00:00
009 A Closer Look At Our Images.mp4

00:00
010 Optimizing Images with the Next Image Component & Feature.mp4

00:00
011 Taking A Look At The Next Image Documentation.mp4

00:00
012 Module Summary.mp4

00:00
013 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

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

001 Module Introduction.mp4

00:00
002 What are API Routes.mp4

00:00
003 Writing Our First API Route.mp4

00:00
004 Preparing the Frontend Form.mp4

00:00
005 Parsing The Incoming Request & Executing Server-side Code.mp4

00:00
006 Sending Requests To API Routes.mp4

00:00
007 Using API Routes To Get Data.mp4

00:00
008 Using API Routes For Pre-Rendering Pages.mp4

00:00
009 Creating & Using Dynamic API Routes.mp4

00:00
010 Exploring Different Ways Of Structuring API Route Files.mp4

00:00
011 Module Summary.mp4

00:00
012 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

17 – Project Time API Routes

001 Module Introduction.mp4

00:00
002 Starting Setup & A Challenge For You!.mp4

00:00
003 Adding a Newsletter Route.mp4

00:00
004 Adding Comments API Routes.mp4

00:00
005 Connecting the Frontend To the Comments API Routes.mp4

00:00
006 Setting Up A MongoDB Database.mp4

00:00
007 Running MongoDB Queries From Inside API Routes.mp4

00:00
008 Inserting Comments Into The Database.mp4

00:00
009 Getting Data From The Database.mp4

00:00
010 Adding Error Handling.mp4

00:00
011 More Error Handling.mp4

00:00
012 A Final Note On MongoDB Connections.html

00:00
013 Module Summary.mp4

00:00
014 Improvement Getting Comments For A Specific Event.html

00:00
015 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

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

001 Module Introduction.mp4

00:00
002 Our Target State & Starting Project.mp4

00:00
003 Creating a New React Context.mp4

00:00
004 Adding Context State.mp4

00:00
005 Using Context Data In Components.mp4

00:00
006 Example Triggering & Showing Notifications.mp4

00:00
007 Example Removing Notifications (Automatically).mp4

00:00
008 Challenge Solution.mp4

00:00
009 Module Summary.mp4

00:00
010 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

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

001 Module Introduction.mp4

00:00
002 Setting Up The Core Pages.mp4

00:00
003 Getting Started With The Home Page.mp4

00:00
004 Adding The Hero Component.mp4

00:00
005 Adding Layout & Navigation.mp4

00:00
006 Time To Add Styling & A Logo.mp4

00:00
007 Starting Work On The Featured Posts Part.mp4

00:00
008 Adding A Post Grid & Post Items.mp4

00:00
009 Rendering Dummy Post Data.mp4

00:00
010 Adding the All Posts Page.mp4

00:00
011 Working On The Post Detail Page.mp4

00:00
012 Rendering Markdown As JSX.mp4

00:00
013 Adding Markdown Files As A Data Source.mp4

00:00
014 Adding Functions To Read & Fetch Data From Markdown Files.mp4

00:00
015 Using Markdown Data For Rendering Posts.mp4

00:00
016 Rendering Dynamic Post Pages & Paths.mp4

00:00
017 Rendering Custom HTML Elements with React Markdown.html

00:00
018 Rendering Images With The Next Image Component (From Markdown).mp4

00:00
019 Rendering Code Snippets From Markdown.mp4

00:00
020 Preparing The Contact Form.mp4

00:00
021 Adding The Contact API Route.mp4

00:00
022 Sending Data From The Client To The API Route.mp4

00:00
023 Storing Messages With MongoDB In A Database.mp4

00:00
024 Adding UI Feedback With Notifications.mp4

00:00
025 Adding head Data.mp4

00:00
026 Adding A _document.js File.mp4

00:00
027 Using React Portals.mp4

00:00
028 Module Summary.mp4

00:00
029 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

20 – Deploying NextJS Apps

001 Module Introduction.mp4

00:00
002 Building NextJS Apps Your Options.mp4

00:00
003 Key Deployment Steps.mp4

00:00
004 Checking & Optimizing Our Code.mp4

00:00
005 The NextJS Config File & Working With Environment Variables.mp4

00:00
006 Running a Test Build & Reducing Code Size.mp4

00:00
007 A Full Deployment Example (To Vercel).mp4

00:00
008 A Note On Github & Secret Credentials.mp4

00:00
009 Using the export Feature.mp4

00:00
010 Module Summary.mp4

00:00
011 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

21 – Adding Authentication

001 Module Introduction.mp4

00:00
002 Our Starting Project.mp4

00:00
003 How Does Authentication Work (In React & NextJS Apps).mp4

00:00
004 Must Read Install the Right next-auth Version.html

00:00
005 Using The next-auth Library.mp4

00:00
006 Adding A User Signup API Route.mp4

00:00
007 Sending Signup Requests From The Frontend.mp4

00:00
008 Improving Signup With Unique Email Addresses.mp4

00:00
009 Adding the Credentials Auth Provider & User Login Logic.mp4

00:00
010 Sending a Signin Request From The Frontend.mp4

00:00
011 Managing Active Session (On The Frontend).mp4

00:00
012 Adding User Logout.mp4

00:00
013 Adding Client-Side Page Guards (Route Protection).mp4

00:00
014 Adding Server-Side Page Guards (And When To Use Which Approach).mp4

00:00
015 Protecting the Auth Page.mp4

00:00
016 Using the next-auth Session Provider Component.mp4

00:00
017 Analyzing Further Authentication Requirements.mp4

00:00
018 Protecting API Routes.mp4

00:00
019 Adding the Change Password Logic.mp4

00:00
020 Sending a Change Password Request From The Frontend.mp4

00:00
021 Module Summary & Final Steps.mp4

00:00
022 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

22 – Optional NextJS Summary

001 Module Introduction.mp4

00:00
002 What is NextJS.mp4

00:00
003 Key Feature Server-side (Pre-) Rendering of Pages.mp4

00:00
004 Key Feature File-based Routing.mp4

00:00
005 Key Feature Build Fullstack Apps With Ease.mp4

00:00
006 Creating a NextJS Project & IDE Setup.mp4

00:00
007 About the App Router.mp4

00:00
008 Analyzing the Created Project.mp4

00:00
009 Adding First Pages To The Project.mp4

00:00
010 Adding Nested Pages Paths.mp4

00:00
011 Creating Dynamic Pages.mp4

00:00
012 Extracting Dynamic Route Data.mp4

00:00
013 Linking Between Pages.mp4

00:00
014 Onwards To A Bigger Project!.mp4

00:00
015 Preparing Our Project Pages.mp4

00:00
016 Rendering A List Of (Dummy) Meetups.mp4

00:00
017 Adding A Form For Adding Meetups.mp4

00:00
018 The _app.js File & Wrapper Components.mp4

00:00
019 Programmatic Navigation.mp4

00:00
020 Adding Custom Components & Styling With CSS Modules.mp4

00:00
021 How NextJS Page Pre-Rendering Actually Works.mp4

00:00
022 Introducing Data Fetching For Page Generation (getStaticProps).mp4

00:00
023 More Static Site Generation (SSG) With getStaticProps.mp4

00:00
024 Exploring getServerSideProps.mp4

00:00
025 Working With Dynamic Path Params In getStaticProps.mp4

00:00
026 Dynamic Pages & getStaticProps & getStaticPaths.mp4

00:00
027 Introducing API Routes.mp4

00:00
028 Connecting & Querying a MongoDB Database.mp4

00:00
029 Sending HTTP Requests To API Routes.mp4

00:00
030 Getting Data From The Database (For Page Pre-Rendering).mp4

00:00
031 Getting Meetup Detail Data & Paths.mp4

00:00
032 Adding head Metadata To Pages.mp4

00:00
033 Deploying NextJS Projects.mp4

00:00
034 Working With Fallback Pages & Re-Deploying.mp4

00:00
035 Module Summary.mp4

00:00
036 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

23 – Course Roundup

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

01 – Getting Started

A Message from the Professor

001 Welcome To The Course!.mp4

002 What Is NextJS Why Would You Use It.mp4

003 Key Features & Benefits Of NextJS.mp4

004 Creating a First NextJS App.mp4

005 NextJS vs Just React – Analyzing The NextJS Project.mp4

006 Editing The First App.mp4

007 Pages Router vs App Router – One Framework, Two Approaches.mp4

008 How To Get The Most Out Of This Course.mp4

009 Learning Community & Course Resources.html

external-links.txt

Section Quiz

02 – Optional React Refresher

001 Using the Code Snasphots.html

002 Module Introduction.mp4

003 What Is React & Why Would You Use It.mp4

004 React Projects – Requirements.mp4

005 Creating React Projects.mp4

006 Our Starting Project.mp4

007 Understanding How React Works.mp4

008 Building A First Custom Component.mp4

009 Outputting Dynamic Values.mp4

010 Reusing Components.mp4

011 Passing Data to Components with Props.mp4

012 CSS Styling & CSS Modules.mp4

013 Exercise & Another Component.mp4

014 Preparing the App For State Management.mp4

015 Adding Event Listeners.mp4

016 Working with State.mp4

017 Lifting State Up.mp4

018 The Special children Prop.mp4

019 State & Conditional Content.mp4

020 Adding a Shared Header & More State Management.mp4

021 Adding Form Buttons.mp4

022 Handling Form Submission.mp4

023 Updating State Based On Previous State.mp4

024 Outputting List Data.mp4

025 Adding a Backend to the React SPA.mp4

026 Sending a POST HTTP Request.mp4

027 Handling Side Effects with useEffect().mp4

028 Handle Loading State.mp4

029 Understanding & Adding Routing.mp4

030 Adding Routes.mp4

031 Working with Layout Routes.mp4

032 Refactoring Route Components & More Nesting.mp4

033 Linking & Navigating.mp4

034 Data Fetching via loader()s.mp4

035 Submitting Data with action()s.mp4

036 Dynamic Routes.mp4

037 Module Summary.mp4

038 IMPORTANT — LEGACY CONTENT BELOW.html

039 Module Introduction.mp4

040 What is ReactJS.mp4

041 Why ReactJS & A First Demo.mp4

042 Building Single-Page Applications (SPAs).mp4

043 React Alternatives.mp4

044 Creating a New React Project.mp4

045 Setting Up A Code Editor.mp4

046 React 18.html

047 Diving Into The Created Project.mp4

048 How React Works & Understanding Components.mp4

049 More Component Work & Styling With CSS Classes.mp4

050 Building & Re-using Components.mp4

051 Passing Data With Props & Dynamic Content.mp4

052 Handling Events.mp4

053 Adding More Components.mp4

054 Introducing State.mp4

055 Working with Event Props.mp4

056 Use The Right React Router Version.html

057 Adding Routing.mp4

058 Adding Links & Navigation.mp4

059 Scoping Component Styles With CSS Modules.mp4

060 Outputting Lists Of Data & Components.mp4

061 Adding Even More Components.mp4

062 Creating Wrapper Components.mp4

063 Working With Forms.mp4