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

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

Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, feature-rich web applications that stand out in the modern digital landscape.NextJS is the key to unlocking the full potential of server-rendered React applications, combining the best of web development into one powerful, developer-friendly framework. This comprehensive course takes you on a deep dive into advanced NextJS features that can set you apart in the job market, equipping you to tackle real-world projects with confidence. By exploring the intricacies of authentication with the Next-Auth library, the innovative approach to data mutations using server actions, and the foundational concepts of server and client components, you'll be well on your way to mastering modern web development.With the tech industry looking for skilled professionals, mastering Next puts you at the forefront of opportunity, with a skill set that's in high demand. Whether you're eyeing a new career as a software engineer or aiming to enhance your existing projects, there's never been a better time to delve into Next.What will you achieve?Through an extensive collection of video lectures complemented by detailed diagrams and real-world examples, this course ensures a thorough understanding of Next's capabilities, no pre-existing knowledge of the framework necessary. I've crafted a learning experience that's both rigorous and encouraging, with layers of knowledge built one at a time and ample dialogue to contextualize each feature of Next.I proudly offer the most detailed journey through Next available online. No stone is left unturned in this resource-packed adventure.Prepare to conquer a diverse array of topics, including:Implementing user authentication flows with next-auth, for secure and scalable user managementEffectively structuring server actions to handle data mutations Dissecting the theory of server vs client components, and knowing how to leverage each for maximum efficiencyMastering data validation techniques to ensure the reliability and integrity of user inputNavigating Next's sophisticated caching systems to deliver lightning-fast content performanceRecognizing the critical differences between development and production environments and preparing your applications for successful deploymentTailoring Server-Side Rendering (SSR) and Static Site Generation (SSG) to your application's needsUtilizing Incremental Static Regeneration (ISR) for the best of SSR and SSGEnriching user interfaces with TailwindCSS support for styling componentsOptimizing images on-the-fly with Next's Image component for better performance and user experienceDeploying your Next applications with Vercel and other hosting platforms with easeLeveraging TypeScript with Next for robust, type-safe applicationsWith each new topic, you’ll gain knowledge, proficiency, and the assurance to apply what you’ve learned to practical scenarios.Embrace the opportunity to define the future of web development with your newly acquired NextJS expertise. Join the ranks of developers who not only follow best practices but also contribute to them. Sign up now and transform your understanding and execution of modern web development with Next.

Overview

Section 1: Get Started Here!

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 26 Fetching Particular Records

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 90 Printing JavaScript Variables in 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 126 Annotations with Variables

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