Next Js: The Complete Developer’S Guide By Stephen Grider

Next Js: The Complete Developer’S Guide
Published 11/2023
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz

Build and deploy amazingly fast apps using Next v14 using App Router, Next Auth, NextUI, and TailwindCSS!

What you’ll learn

Make incredibly performant web apps using Next JS

Understand the differences between running Next JS in development and production environments

Utilize four different caching systems to speed up request response times

Use the latest React tech with Server Components to build streaming interfaces

Implement robust and secure user authentication with the Next Auth library

Build complicated routing structure by using route interception and parallel routing

Automatically update and refresh data with the use of Server Actions with Revalidation
Optimize image fetching and loading through the use of Next’s Image component

Add robust form validation and handling by implementing React’s new useFormState hook

Requirements

Basic knowledge of React and Typescript is helpful, but refresher sections on these topics are included

Description

Overview

Lecture 1 How to Learn NextJS Quickly

Lecture 2 Project Overview

Lecture 3 File-Based Routing

Lecture 4 Adding Additional Routes

Lecture 5 Linking Between Pages

Lecture 6 Common UI with Layouts

Lecture 7 Project Structure Strategy
Lecture 8 Absolute Path Import Shortcut

Lecture 9 Image Files

Lecture 10 Adding Images

Lecture 11 More on the Image Component

Lecture 12 Adding a Reusable Presentation Component

Lecture 13 Adding Some Styling

Lecture 14 Production Deployment with Vercel

Lecture 15 Diagrams

Section 2: Changing Data with Mutations

Lecture 16 App Overview

Lecture 17 Project Setup

Lecture 18 Adding a Create Page

Lecture 19 Creating a Prisma Client

Lecture 20 Adding a Creation Form

Section 3: Streaming Content with React Server Components

Lecture 21 Introducing Server Actions
Lecture 22 A Deeper Dive into Server Actions
Lecture 23 Server Components vs Client Components

Lecture 24 Fetching Data with Server Components

Lecture 25 Adding Dynamic Paths

Lecture 27 Custom Not Found Pages

Lecture 28 Automatic Loading Spinnners

Lecture 29 A Few Quick Tasks

Lecture 30 Styling the Show Page

Lecture 31 Linking to the Edit Page

Lecture 32 Showing a Client Component in a Server Component

Lecture 33 Adding the Monaco Editor

Lecture 34 Handling Editor Changes

Section 4: Server Actions in Great Detail
Lecture 35 Server Actions in Client Components
Lecture 36 Server Actions in a Separate File
Lecture 37 Options for Calling Server Actions from Client Components
Lecture 38 Calling a Server Action from a Client Component
Lecture 39 Deleting a Record with a Server Action
Section 5: Server Forms with the UseFormState Hook

Lecture 40 Understanding the UseFormState Hook

Lecture 41 UseForm State in Action
Lecture 42 Adding the Form Validation

Lecture 43 Gotchas Around Error Handling

Section 6: Understanding Next’s Caching System

Lecture 44 Super Unexpected Behavior

Lecture 45 The Full Route Cache System

Lecture 46 What Makes a Static or Dynamic Route

Lecture 47 When to Use Each Cache Control

Lecture 48 Help, My Page is Showing Old Data!

Lecture 49 Enabling Caching with GenerateStaticParams

Lecture 50 Caching Dynamic Routes

Section 7: Authentication with Next-Auth

Lecture 51 Project Overview

Lecture 52 Critical Libraries in Our Project

Lecture 53 NextUI Installation and Setup

Lecture 54 Prisma Schema File

Lecture 55 Database Setup

Lecture 56 OAuth Setup

Lecture 57 Next-Auth Setup

Lecture 58 The Theory Behind OAuth

Lecture 59 Wrapping Auth in Server Actions
Lecture 60 Sign In, Sign out, and Checking Auth Status

Lecture 61 Upfront Design Process

Lecture 62 Why Path Helpers?

Lecture 63 Path Helper Implementation

Lecture 64 Creating the Routing Structure

Lecture 65 Stubbing Out Server Actions
Lecture 66 Planning Revalidating Strategies

Lecture 67 Building the Header

Lecture 68 Displaying the Sign In and Sign Out Buttons

Lecture 69 Enabling Sign Out

Lecture 70 More Caching Issues

Lecture 71 Static Caching While Using Auth

Lecture 72 Creating Topics

Lecture 73 Creating a Popover Form

Lecture 74 Receiving Form Data

Lecture 75 Adding Form Validation With Zod

Lecture 76 Reminder on the UseFormState Hook

Lecture 77 Fixing UseFormState Type Errors

Lecture 78 Here’s our FormState Type

Lecture 79 Displaying Validation Errors

Lecture 80 Handling General Form Errors

Lecture 81 Handling Database Errors in Forms

Section 8: Supplement – React Primer

Lecture 82 Let’s Build an App!

Lecture 83 Critical Questions

Lecture 84 A Few More Critical Questions

Lecture 85 Node Setup

Lecture 86 Creating a React Project

Lecture 87 What is Create React App

Lecture 88 Showing Basic Content

Lecture 89 What is JSX?

Lecture 91 Shorthand JSX Expressions

Lecture 92 Typical Component Layouts

Lecture 93 Customizing Elements with Props

Lecture 94 Converting HTML to JSX

Lecture 95 Applying Styling in JSX

Lecture 96 Extracting Components

Lecture 97 Module Systems Overview

Lecture 98 Cheatsheet for JSX

Lecture 99 Project Overview

Lecture 100 Creating Core Components

Lecture 101 Introducing the Props Systems

Lecture 102 Picturing the Movement of Data

Lecture 103 Adding Props

Lecture 104 Using Argument Destructuring

Lecture 105 React Developer Tools

Lecture 106 Most Common Props Mistake

Lecture 107 Images for the App

Lecture 108 Including Images

Lecture 109 Handling Image Accessibility

Lecture 110 Review on How CSS Works

Lecture 111 Adding CSS Libraries with NPM

Lecture 112 A Big Pile of HTML!

Lecture 113 Last Bit of Styling

Section 9: Supplement – TypeScript Primer

Lecture 114 TypeScript Overview

Lecture 115 Environment Setup

Lecture 116 A First App

Lecture 117 Executing TypeScript Code

Lecture 118 One Quick Change

Lecture 119 Catching Errors with TypeScript

Lecture 120 Catching More Errors!

Lecture 121 Types

Lecture 122 More on Types

Lecture 123 Examples of Types

Lecture 124 Where Do We Use Types

Lecture 125 Type Annotations and Inference

Lecture 127 Object Literal Annotations

Lecture 128 Annotations Around Functions

Lecture 129 Understanding Inference

Lecture 130 The "Any" Type

Lecture 131 Fixing the "Any" Type

Lecture 132 Delayed Initialization

Lecture 133 When Inference Doesn’t Work

Lecture 134 More on Annotations Around Functions

Lecture 135 Inference Around Functions

Lecture 136 Annotations for Anonymous Functions

Lecture 137 Void and Never

Lecture 138 Destructuring with Annotations

Lecture 139 Annotations Around Objects

Lecture 140 Arrays in TypeScript

Lecture 141 Why Typed Arrays?

Lecture 142 Multiple Types in Arrays

Lecture 143 When to Use Typed Arrays

Lecture 144 Tuples in TypeScript

Lecture 145 Tuples in Action
Lecture 146 Why Tuples?

Lecture 147 Interfaces

Lecture 148 Long Type Annotations

Lecture 149 Fixing Annotations with Interfaces

Lecture 150 Syntax Around Interfaces

Lecture 151 Functions in Interfaces

Lecture 152 Code Reuse with Interfaces

Lecture 153 General Plan with Interfaces

Any engineer looking to build high-performance web apps with Next JS