CF

Next JS: The Complete Developer's Guide

15h 35m 12s
English
Paid

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, with 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.

Course Topics Overview

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.

Join Us and Transform Your Skills

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.

About the Authors

Stephen Grider

Stephen Grider thumbnail

Stephen Grider is one of the longest-running and most prolific instructors on Udemy, with a catalog covering essentially every major JavaScript framework, plus Docker, Kubernetes, AWS, and the broader full-stack development landscape. His teaching style is patient and project-oriented — most of his courses are structured around building a substantial application from scratch rather than working through disconnected tutorial examples.

The catalog covers React, Redux, Next.js, Vue, Angular, GraphQL, Node.js, Docker / Kubernetes, AWS infrastructure, React Native and Flutter for mobile, the algorithm / data-structure interview prep track, and the modern TypeScript / Bun / Rust adjacent material that working JavaScript developers increasingly encounter. Few independent instructors have maintained Stephen's breadth this consistently for this long.

The CourseFlix listing under this source carries over 25 Stephen Grider courses spanning that range. Material is paid; Stephen Grider courses are typically sold individually on Udemy. Courses are aimed primarily at developers picking up a specific technology through working through a complete project.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 182 lessons

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

Related courses

Frequently asked questions

What are the prerequisites for this NextJS course?
This course does not require any pre-existing knowledge of the NextJS framework. However, having a basic understanding of JavaScript and React will be beneficial as the course delves into advanced features of NextJS, such as server actions and authentication with Next-Auth.
What projects will I work on during this course?
Throughout the course, you will work on real-world projects that include setting up a NextJS app, implementing file-based routing, and deploying to Vercel. The course also covers creating dynamic routes, integrating a Prisma database client, and using server and client components to enhance application functionality.
Who is the target audience for this NextJS course?
This course is ideal for developers aiming to master server-rendered React applications. It suits both beginners who want to learn NextJS from scratch and experienced developers looking to deepen their understanding of advanced NextJS features, such as server actions and authentication.
How does this course compare to other NextJS courses?
This course offers a deep dive into advanced NextJS features, including server actions, Next-Auth authentication, and caching strategies. Unlike some introductory courses, it provides comprehensive coverage of both server and client components, equipping students to tackle complex, real-world projects.
What tools and platforms are covered in this course?
The course covers a variety of tools and platforms essential for building and deploying NextJS applications. You will learn about Vercel for production deployment, Prisma for database interactions, NextUI for interface design, and the Monaco Editor for code editing.
What topics are not covered in this NextJS course?
While the course provides extensive coverage of NextJS, it does not focus on non-JavaScript frameworks or technologies outside the NextJS ecosystem. Additionally, broader topics like general web development principles or deep dives into non-NextJS specific libraries are not covered.
What is the expected time commitment for this course?
The course consists of 182 lessons, each designed to thoroughly explore different aspects of NextJS. Although the total runtime is not specified, students should be prepared to invest significant time in both watching lectures and completing practical exercises to fully grasp the material.