Next JS: The Complete Developer's Guide by Udemy
Build apps using NextJS v14 using App Router, Next Auth, NextUI, and TailwindCSS! Learn the latest version of NextJS!
Course Highlights
- 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
Skills you will learn!
Curriculum
16 Topics
How to Learn NextJS Quickly
Project Overview
File-Based Routing
Adding Additional Routes
Linking Between Pages
Common UI in Next JS with Layouts
Project Structure Strategy
Absolute Path Import Shortcut
Image Files
Adding Images in Next JS
More on the Image Component
Adding a Reusable Presentation Component
Adding Some Styling
Production Deployment with Vercel
Join Our Community!
Course Diagrams
5 Topics
App Overview
Project Setup
Adding a Create Page
Creating a Prisma Client within Next.js
Adding a Creation Form
14 Topics
Introducing Server Actions in Next.js
A Deeper Dive into Server Actions
Server Components vs Client Components
Fetching Data with Server Components
Adding Dynamic Paths
Fetching Particular Records
Custom Not Found Pages
Automatic Loading Spinnners
A Few Quick Tasks
Styling the Show Page
Linking to the Edit Page
Showing a Client Component in a Server Component
Adding the Monaco Editor
Handling Editor Changes
5 Topics
Server Actions in Nextjs Client Components
Server Actions in a Separate File
Options for Calling Server Actions from Client Components
Calling a Server Action from a Client Component
Deleting a Record with a Server Action
4 Topics
Understanding the UseFormState Hook
UseForm State in Action
Adding the Form Validation
Gotchas Around Error Handling in Nextjs
7 Topics
Super Unexpected Behavior
The Full Route Cache System
What Makes a Static or Dynamic Route in Next.js
When to Use Each Cache Control
Help My Page is Showing Old Data!
Enabling Caching with GenerateStaticParams
Caching Dynamic Routes
31 Topics
Project Overview
Critical Libraries in Our Project
NextUI Installation and Setup
Prisma Schema File
Database Setup
OAuth Setup
Next-Auth Setup
The Theory Behind OAuth
Wrapping Auth in Server Actions
Sign In Sign out and Checking Auth Status
Upfront Design Process
Why Path Helpers?
Path Helper Implementation
Creating the Routing Structure
Stubbing Out Server Actions
Planning Revalidating Strategies
Building the Header
Displaying the Sign In and Sign Out Buttons
Enabling Sign Out
More Caching Issues
Static Caching While Using Auth
Creating Topics
Creating a Popover Form
Receiving Form Data
Adding Form Validation with Zod
Reminder on the UseFormState Hook
Fixing UseFormState Type Errors
Here's Our FormState Type
Displaying Validation Errors
Handling General Form Errors
Handling Database Errors in Forms
19 Topics
Showing Loading Spinners with UseFormStatus
Fetching and Listing Content from Prisma
Scaffolding the Topic Show Page
Displaying a Creation Form
Applying Validation to Post Creation
Checking Authentication Status
Passing Additional Args to a Server Action
Creating the Record
A Few Project Files
Merging a Few Files
Considerations Around Where to Fetch Data
Data Fetching in Child Components
Recommended Data Fetching
Define in Parent Fetch in Child
Alternative Type Names and Query Definitions
Don't Go Crazy With Reuse
Comment Creation
Recursively Rendering Components
Fetching the Big List
4 Topics
Multiple Repeated DB Queries
Introducing Duplicate Queries
Request Memoization
Deduplicating Requests with Cache
12 Topics
Adding in Component Streaming
Streaming with Suspense
Adding a Loading Skeleton
Top Posts on the HomePage
Back to the Search Input
Notes on QueryStrings in Next
Accessing the Query String
Redirecting From a Server Action
Receiving the Query String in a Server Component
Running the Search
The De-Opt to Client Side Rendering Warning
Wrap Up!
33 Topics
A Note About the Following Lectures
Let's Build an App!
Critical Questions
A Few More Critical Questions
Node Setup
Creating a React Project
What is Create React App
Showing Basic Content
What is JSX?
Printing JavaScript Variables in JSX
Shorthand JSX Expressions
Typical Component Layouts
Customizing Elements with Props
Converting HTML to JSX
Applying Styling in JSX
Extracting Components
Module Systems Overview
Cheatsheet for JSX
Project Overview
Creating Core Components
Introducing the Props Systems
Picturing the Movement of Data
Adding Props
Using Argument Destructuring
React Developer Tools
Most Common Props Mistake
Images for the App
Including Images
Handling Image Accessibility
Review on How CSS Works
Adding CSS Libraries with NPM
A Big Pile of HTML!
Last Bit of Styling
41 Topics
A Note About the Following Lectures
TypeScript Overview
Environment Setup
A First App
Executing TypeScript Code
One Quick Change
Catching Errors with TypeScript
Catching More Errors!
Types
More on Types
Examples of Types
Where Do We Use Types
Type Annotations and Inference
Annotations with Variables
Object Literal Annotations
Annotations Around Functions
Understanding Inference
The "Any" Type
Fixing the "Any" Type
Delayed Initialization
When Inference Doesn't Work
More on Annotations Around Functions
Inference Around Functions
Annotations for Anonymous Functions
Void and Never
Destructuring with Annotations
Annotations Around Objects
Arrays in TypeScript
Why Typed Arrays?
Multiple Types in Arrays
When to Use Typed Arrays
Tuples in TypeScript
Tuples in Action
Why Tuples?
Interfaces
Long Type Annotations
Fixing Annotations with Interfaces
Syntax Around Interfaces
Functions in Interfaces
Code Reuse with Interfaces
General Plan with Interfaces
1 Topic
Bonus!
Next JS: The Complete Developer's Guide
Related Next.js Courses
Thank You!
Your review has been submitted successfully.