English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 192 lectures (15h 33m) | 5.42 GB
Build and deploy amazingly fast apps using Next v14 using App Router, Next Auth, NextUI, and TailwindCSS!
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 management
- Effectively structuring server actions to handle data mutations
- Dissecting the theory of server vs client components, and knowing how to leverage each for maximum efficiency
- Mastering data validation techniques to ensure the reliability and integrity of user input
- Navigating Next’s sophisticated caching systems to deliver lightning-fast content performance
- Recognizing the critical differences between development and production environments and preparing your applications for successful deployment
- Tailoring Server-Side Rendering (SSR) and Static Site Generation (SSG) to your application’s needs
- Utilizing Incremental Static Regeneration (ISR) for the best of SSR and SSG
- Enriching user interfaces with TailwindCSS support for styling components
- Optimizing images on-the-fly with Next’s Image component for better performance and user experience
- Deploying your Next applications with Vercel and other hosting platforms with ease
- Leveraging TypeScript with Next for robust, type-safe applications
With 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.
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
Table of Contents
Get Started Here
1 How to Learn NextJS Quickly
2 Project Overview
3 FileBased Routing
4 Adding Additional Routes
5 Linking Between Pages
6 Common UI in Next JS with Layouts
7 Project Structure Strategy
8 Absolute Path Import Shortcut
9 Image Files
10 Adding Images in Next JS
11 More on the Image Component
12 Adding a Reusable Presentation Component
13 Adding Some Styling
14 Production Deployment with Vercel
15 Join Our Community
16 Course Diagrams
Changing Data with Mutations
17 App Overview
18 Project Setup
19 Adding a Create Page
20 Creating a Prisma Client within Nextjs
21 Adding a Creation Form
Streaming Content with React Server Components
22 Introducing Server Actions in Nextjs
23 A Deeper Dive into Server Actions
24 Server Components vs Client Components
25 Fetching Data with Server Components
26 Adding Dynamic Paths
27 Fetching Particular Records
28 Custom Not Found Pages
29 Automatic Loading Spinnners
30 A Few Quick Tasks
31 Styling the Show Page
32 Linking to the Edit Page
33 Showing a Client Component in a Server Component
34 Adding the Monaco Editor
35 Handling Editor Changes
Server Actions in Great Detail
36 Server Actions in Nextjs Client Components
37 Server Actions in a Separate File
38 Options for Calling Server Actions from Client Components
39 Calling a Server Action from a Client Component
40 Deleting a Record with a Server Action
Server Forms with the UseFormState Hook
41 Understanding the UseFormState Hook
42 UseForm State in Action
43 Adding the Form Validation
44 Gotchas Around Error Handling in Nextjs
Understanding Nexts Caching System
45 Super Unexpected Behavior
46 The Full Route Cache System
47 What Makes a Static or Dynamic Route in Nextjs
48 When to Use Each Cache Control
49 Help My Page is Showing Old Data
50 Enabling Caching with GenerateStaticParams
51 Caching Dynamic Routes
Authentication with NextAuth
52 Project Overview
53 Critical Libraries in Our Project
54 NextUI Installation and Setup
55 Prisma Schema File
56 Database Setup
57 OAuth Setup
58 NextAuth Setup
59 The Theory Behind OAuth
60 Wrapping Auth in Server Actions
61 Sign In Sign out and Checking Auth Status
62 Upfront Design Process
63 Why Path Helpers
64 Path Helper Implementation
65 Creating the Routing Structure
66 Stubbing Out Server Actions
67 Planning Revalidating Strategies
68 Building the Header
69 Displaying the Sign In and Sign Out Buttons
70 Enabling Sign Out
71 More Caching Issues
72 Static Caching While Using Auth
73 Creating Topics
74 Creating a Popover Form
75 Receiving Form Data
76 Adding Form Validation with Zod
77 Reminder on the UseFormState Hook
78 Fixing UseFormState Type Errors
79 Heres Our FormState Type
80 Displaying Validation Errors
81 Handling General Form Errors
82 Handling Database Errors in Forms
Using Data Database Queries
83 Showing Loading Spinners with UseFormStatus
84 Fetching and Listing Content from Prisma
85 Scaffolding the Topic Show Page
86 Displaying a Creation Form
87 Applying Validation to Post Creation
88 Checking Authentication Status
89 Passing Additional Args to a Server Action
90 Creating the Record
91 A Few Project Files
92 Merging a Few Files
93 Considerations Around Where to Fetch Data
94 Data Fetching in Child Components
95 Recommended Data Fetching
96 Define in Parent Fetch in Child
97 Alternative Type Names and Query Definitions
98 Dont Go Crazy With Reuse
99 Comment Creation
100 Recursively Rendering Components
101 Fetching the Big List
Caching with Request Memoization
102 Multiple Repeated DB Queries
103 Introducing Duplicate Queries
104 Request Memoization
105 Deduplicating Requests with Cache
Implementing Search Functionality
106 Adding in Component Streaming
107 Streaming with Suspense
108 Adding a Loading Skeleton
109 Top Posts on the HomePage
110 Back to the Search Input
111 Notes on QueryStrings in Next
112 Accessing the Query String
113 Redirecting From a Server Action
114 Receiving the Query String in a Server Component
115 Running the Search
116 The DeOpt to Client Side Rendering Warning
117 Wrap Up
Supplement React Primer
118 A Note About the Following Lectures
119 Lets Build an App
120 Critical Questions
121 A Few More Critical Questions
122 Node Setup
123 Creating a React Project
124 What is Create React App
125 Showing Basic Content
126 What is JSX
127 Printing JavaScript Variables in JSX
128 Shorthand JSX Expressions
129 Typical Component Layouts
130 Customizing Elements with Props
131 Converting HTML to JSX
132 Applying Styling in JSX
133 Extracting Components
134 Module Systems Overview
135 Cheatsheet for JSX
136 Project Overview
137 Creating Core Components
138 Introducing the Props Systems
139 Picturing the Movement of Data
140 Adding Props
141 Using Argument Destructuring
142 React Developer Tools
143 Most Common Props Mistake
144 Images for the App
145 Including Images
146 Handling Image Accessibility
147 Review on How CSS Works
148 Adding CSS Libraries with NPM
149 A Big Pile of HTML
150 Last Bit of Styling
Supplement TypeScript Primer
151 A Note About the Following Lectures
152 TypeScript Overview
153 Environment Setup
154 A First App
155 Executing TypeScript Code
156 One Quick Change
157 Catching Errors with TypeScript
158 Catching More Errors
159 Types
160 More on Types
161 Examples of Types
162 Where Do We Use Types
163 Type Annotations and Inference
164 Annotations with Variables
165 Object Literal Annotations
166 Annotations Around Functions
167 Understanding Inference
168 The Any Type
169 Fixing the Any Type
170 Delayed Initialization
171 When Inference Doesnt Work
172 More on Annotations Around Functions
173 Inference Around Functions
174 Annotations for Anonymous Functions
175 Void and Never
176 Destructuring with Annotations
177 Annotations Around Objects
178 Arrays in TypeScript
179 Why Typed Arrays
180 Multiple Types in Arrays
181 When to Use Typed Arrays
182 Tuples in TypeScript
183 Tuples in Action
184 Why Tuples
185 Interfaces
186 Long Type Annotations
187 Fixing Annotations with Interfaces
188 Syntax Around Interfaces
189 Functions in Interfaces
190 Code Reuse with Interfaces
191 General Plan with Interfaces
Bonus
192 Bonus
Resolve the captcha to access the links!