Next JS: The Complete Developer's Guide

15h 35m 12s
English
Paid

Course 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.

Read more about the course

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.


Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 182 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Next JS: The Complete Developer's Guide

0:00
/
#1: How to Learn NextJS Quickly

All Course Lessons (182)

#Lesson TitleDurationAccess
1
How to Learn NextJS Quickly Demo
03:59
2
Project Overview
03:32
3
File-Based Routing
06:44
4
Adding Additional Routes
03:49
5
Linking Between Pages
03:04
6
Common UI in Next JS with Layouts
05:43
7
Project Structure Strategy
03:40
8
Absolute Path Import Shortcut
02:17
9
Adding Images in Next JS
06:12
10
More on the Image Component
08:31
11
Adding a Reusable Presentation Component
07:30
12
Adding Some Styling
05:34
13
Production Deployment with Vercel
04:47
14
App Overview
01:32
15
Project Setup
03:51
16
Adding a Create Page
02:16
17
Creating a Prisma Client within Next.js
02:15
18
Adding a Creation Form
05:52
19
Introducing Server Actions in Next.js
10:38
20
A Deeper Dive into Server Actions
02:49
21
Server Components vs Client Components
08:51
22
Fetching Data with Server Components
03:52
23
Adding Dynamic Paths
04:57
24
Fetching Particular Records
05:07
25
Custom Not Found Pages
05:09
26
Automatic Loading Spinnners
03:01
27
A Few Quick Tasks
06:26
28
Styling the Show Page
02:58
29
Linking to the Edit Page
03:29
30
Showing a Client Component in a Server Component
09:54
31
Adding the Monaco Editor
05:04
32
Handling Editor Changes
03:22
33
Server Actions in Nextjs Client Components
05:44
34
Server Actions in a Separate File
03:37
35
Options for Calling Server Actions from Client Components
07:34
36
Calling a Server Action from a Client Component
05:00
37
Deleting a Record with a Server Action
03:28
38
Understanding the UseFormState Hook
07:11
39
UseForm State in Action
06:55
40
Adding the Form Validation
03:36
41
Gotchas Around Error Handling in Nextjs
09:49
42
Super Unexpected Behavior
02:17
43
The Full Route Cache System
04:03
44
What Makes a Static or Dynamic Route in Next.js
05:11
45
When to Use Each Cache Control
05:19
46
Help, My Page is Showing Old Data!
04:07
47
Enabling Caching with GenerateStaticParams
02:38
48
Caching Dynamic Routes
06:19
49
Project Overview
03:36
50
Critical Libraries in Our Project
02:51
51
NextUI Installation and Setup
06:59
52
Database Setup
04:51
53
OAuth Setup
05:49
54
Next-Auth Setup
08:18
55
The Theory Behind OAuth
08:14
56
Wrapping Auth in Server Actions
03:05
57
Sign In, Sign out, and Checking Auth Status
12:11
58
Upfront Design Process
06:53
59
Why Path Helpers?
03:50
60
Path Helper Implementation
03:35
61
Creating the Routing Structure
03:23
62
Stubbing Out Server Actions
06:03
63
Planning Revalidating Strategies
07:18
64
Building the Header
08:14
65
Displaying the Sign In and Sign Out Buttons
05:04
66
Enabling Sign Out
05:54
67
More Caching Issues
06:16
68
Static Caching While Using Auth
08:53
69
Creating Topics
05:15
70
Creating a Popover Form
05:08
71
Receiving Form Data
02:59
72
Adding Form Validation with Zod
09:08
73
Reminder on the UseFormState Hook
02:41
74
Fixing UseFormState Type Errors
05:16
75
Here's Our FormState Type
04:56
76
Displaying Validation Errors
02:45
77
Handling General Form Errors
06:06
78
Handling Database Errors in Forms
09:14
79
Showing Loading Spinners with UseFormStatus
07:06
80
Fetching and Listing Content from Prisma
06:31
81
Scaffolding the Topic Show Page
03:04
82
Displaying a Creation Form
06:09
83
Applying Validation to Post Creation
09:19
84
Checking Authentication Status
02:48
85
Passing Additional Args to a Server Action
09:23
86
Creating the Record
04:59
87
Merging a Few Files
04:16
88
Considerations Around Where to Fetch Data
10:57
89
Data Fetching in Child Components
11:39
90
Recommended Data Fetching
04:27
91
Define in Parent, Fetch in Child
08:39
92
Alternative Type Names and Query Definitions
03:56
93
Don't Go Crazy With Reuse
04:53
94
Comment Creation
01:13
95
Recursively Rendering Components
04:51
96
Fetching the Big List
09:43
97
Multiple Repeated DB Queries
02:12
98
Introducing Duplicate Queries
04:52
99
Request Memoization
04:11
100
Deduplicating Requests with Cache
02:26
101
Adding in Component Streaming
04:23
102
Streaming with Suspense
03:20
103
Adding a Loading Skeleton
03:45
104
Top Posts on the HomePage
04:28
105
Back to the Search Input
01:52
106
Notes on QueryStrings in Next
06:22
107
Accessing the Query String
02:19
108
Redirecting From a Server Action
03:27
109
Receiving the Query String in a Server Component
02:35
110
Running the Search
04:41
111
The De-Opt to Client Side Rendering Warning
02:52
112
Wrap Up!
02:41
113
Let's Build an App!
07:57
114
Critical Questions
05:50
115
A Few More Critical Questions
08:52
116
Node Setup
01:59
117
Creating a React Project
02:39
118
What is Create React App
05:51
119
Showing Basic Content
06:42
120
What is JSX?
05:49
121
Printing JavaScript Variables in JSX
04:30
122
Shorthand JSX Expressions
01:52
123
Typical Component Layouts
01:59
124
Customizing Elements with Props
07:37
125
Converting HTML to JSX
05:08
126
Applying Styling in JSX
06:14
127
Extracting Components
04:27
128
Module Systems Overview
16:07
129
Project Overview
05:38
130
Creating Core Components
05:01
131
Introducing the Props Systems
04:52
132
Picturing the Movement of Data
06:07
133
Adding Props
03:05
134
Using Argument Destructuring
04:58
135
React Developer Tools
02:38
136
Most Common Props Mistake
04:44
137
Including Images
08:10
138
Handling Image Accessibility
06:40
139
Review on How CSS Works
06:11
140
Adding CSS Libraries with NPM
05:58
141
A Big Pile of HTML!
09:39
142
Last Bit of Styling
05:46
143
TypeScript Overview
06:20
144
Environment Setup
08:00
145
A First App
04:44
146
Executing TypeScript Code
05:04
147
One Quick Change
03:36
148
Catching Errors with TypeScript
07:23
149
Catching More Errors!
05:16
150
Types
05:13
151
More on Types
05:54
152
Examples of Types
04:50
153
Where Do We Use Types
00:50
154
Type Annotations and Inference
02:04
155
Annotations with Variables
04:54
156
Object Literal Annotations
06:54
157
Annotations Around Functions
05:57
158
Understanding Inference
03:52
159
The "Any" Type
07:48
160
Fixing the "Any" Type
01:50
161
Delayed Initialization
03:06
162
When Inference Doesn't Work
04:38
163
More on Annotations Around Functions
04:57
164
Inference Around Functions
06:09
165
Annotations for Anonymous Functions
01:43
166
Void and Never
02:50
167
Destructuring with Annotations
03:36
168
Annotations Around Objects
07:06
169
Arrays in TypeScript
05:06
170
Why Typed Arrays?
04:31
171
Multiple Types in Arrays
02:58
172
When to Use Typed Arrays
00:55
173
Tuples in TypeScript
04:06
174
Tuples in Action
05:29
175
Why Tuples?
03:21
176
Interfaces
01:27
177
Long Type Annotations
04:43
178
Fixing Annotations with Interfaces
04:37
179
Syntax Around Interfaces
03:32
180
Functions in Interfaces
04:47
181
Code Reuse with Interfaces
04:16
182
General Plan with Interfaces
03:13

Unlock unlimited learning

Get instant access to all 181 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
supastarter - SaaS starter kit for Next.js & Nuxt

supastarter - SaaS starter kit for Next.js & Nuxt

Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...
Next.js Firebase - The Full Course

Next.js Firebase - The Full Course

Sources: fireship.io
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then pub
2 hours 38 minutes 13 seconds