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

Join premium to watch
Go to premium
# Title Duration
1 How to Learn NextJS Quickly 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBook

Sources: jsmastery.pro
Enter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling ever
51 hours 35 minutes 4 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Sources: udemy
Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards...
8 hours 12 minutes 38 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS product

Sources: Max Stoiber (@mxstbr)
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.
Nest.js Microservices: Build & Deploy a Scaleable Backend

Nest.js Microservices: Build & Deploy a Scaleable Backend

Sources: udemy
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul
5 hours 39 minutes 49 seconds
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Sources: udemy
This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour
8 hours 6 minutes 25 seconds