English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 367 Lessons (30h 40m) | 5.87 GB
As a full-stack developer there are so many opportunities out there. Whether you are launching a profitable startup, making a career in an enterprise company, or freelancing for a well paid contract job, full-stack web development is a skill that gives you the freedom to take any of these paths.
The Road to Next with its two learning journeys as video courses teaches you more than just a framework. You will get prepared to think in well structured code, how to apply your craft in larger applications, and how to execute with precision. It teaches you to perform like a senior software engineer: managing multiple terminals and services simultaneously, including payment gateways, message queues, database inspectors, and email servers.
It’s not just a video course either. Step by step you’ll create your own starter kit project to put your learning into immediate practice. Build and deploy a SaaS product, gaining hands-on experience with the tools and techniques used by industry professionals. I put all my knowledge that I have learned from the last years being employed and being a freelancer into this course and hope you will do great afterwards too.
This is for people who want to climb to a senior level, those looking for an advanced React or backend course, those aiming to transition from frontend to full-stack development, and those who want to build real-world SaaS products. It’s perfect for aspiring developers seeking to deepen their understanding of complex engineering principles and anyone passionate about mastering advanced React and Next.js concepts in the context of full-stack development.
So are you ready to become a full-stack developer with me?
The Tech Stack
Next.js 15
The most popular full-stack React framework
Used by some of the world’s largest companies, Next.js enables you to create high-quality web applications with the power of React components.
React 19
The most popular frontend framework
React lets you build user interfaces out of individual pieces called components. Create your own React components and combine them into entire screens, pages, and apps.
Prisma
Next-generation TypeScript ORM
Prisma provides the best DX for your team to work and interact with databases. Even complex topics like connection pooling, caching, real-time subscriptions become possible.
Supabase
Serverless Postgres
Supabase is an open source Firebase alternative. Start your project with a Postgres database and add more services as you need them.
TypeScript
Type-safe JavaScript as industry standard
Unlock the Power of TypeScript: Dive into a world where strong typing leads to more reliable code. Embrace the confidence to tackle complex projects.
Zod
TypeScript-first schema validation
Zod ensures safer TypeScript-based schema validation, reducing bugs and enforcing data integrity with concise syntax and seamless TypeScript integration.
Oslo
Zero Vendor Lock-in Authentication
Oslo.js is a lightweight, typed auth library offering JWT, OAuth2, password hashing, WebAuthn verification, and cryptographic tools for secure authentication.
Vercel
The best deployment platform for Next.js
Vercel is a cloud platform for rapidly deploying and scaling modern web projects. Offering a seamless integration with Next.js, it is the best fit for this tech stack.
Tailwind
Industry standard for CSS Styling
Tailwind CSS is a highly customizable utility-first CSS framework that streamlines the styling process by providing an extensive set of pre-built classes.
Shadcn/UI
Popular reusable components library
Discover a collection of exquisitely crafted components ready for seamless integration into your applications. Accessible, fully customizable, and proudly open source.
Table of Contents
The Road to Next (Basic)
1 Welcome to The Road to Next
2 Software to create Software
3 Visual Studio Code (VSCode)
4 External Terminal (Optional)
5 Browser
6 Node
7 NPM
8 Manual setup in Next
9 JSX
10 Components
11 Props
12 Styling
13 Interactions
14 State
15 Composition
16 File Extraction
17 Outro
18 What are pitfalls_
19 Restarting Things
20 Wrong (Auto) Imports
21 npm install –force
22 Breaking Changes
23 create-next-app
24 Next 15 & React 19
25 Exploring the Starter
26 Git & GitHub
27 Deploy
28 Exploring the finished Project
29 Script
30 Import Sort
31 Pages
32 Static and Dynamic Routes [B]
33 Link Components
34 Absolute Imports
35 Path Constants
36 Layout
37 Script
38 const Assertions
39 Tailwind CSS [C]
40 Tailwind CSS in Next
41 Conditional Style
42 Animations with Tailwind
43 SVGs
44 Setup [B]
45 Button
46 Card
47 Separator
48 Icons [C]
49 Theming
50 Heading
51 Header
52 Placeholder
53 Intro [B]
54 Extract
55 Modify
56 Reuse
57 Recap
58 Implementation
59 Data Fetching in Client Components
60 Characteristics of Client Components
61 Client-Server Boundary [C]
62 Client-Server Composition
63 Data Fetching in Server Components
64 SSR vs Server Components
65 Server-Side Rendering
66 Streaming
67 Suspense
68 Loading Route
69 Introduction
70 Error Route
71 Error Boundary (Optional)
72 Not Found Route
73 Nearest Boundary Bubbling
74 Connect to Database
75 Prisma
76 Prisma Schema
77 Seeding the Database
78 Prisma Studio
79 Prisma Client
80 Database Queries
81 ORM generated Types
82 Typed APIs (Optional)
83 Server Actions in Client Components
84 Server Actions in Server Components
85 redirect
86 Development vs Production
87 Router Cache
88 Full Route Cache
89 Static vs Dynamic Rendering
90 Time-Based Cache (ISR)
91 On-Demand Caching (ISR)
92 Where do we cache_
93 Request Memoization
94 Generate Static Params (Optional)
95 Recap
96 Create Form
97 Configuration over Composition (Software Craftsmanship)
98 Edit Form [B]
99 DRY with Abstractions (Software Craftsmanship)
100 Progressive Enhancement
101 useTransition
102 useFormStatus
103 useActionState
104 Form Validation
105 Form Reset
106 Error Handling
107 Field Errors in Forms
108 Premature Optimization (Software Craftsmanship)
109 Action Callbacks
110 Debugging (Software Craftsmanship)
111 Toast Feedback
112 Form Abstraction
113 Cookie API [B]
114 Set Cookie [B]
115 Read Cookie [B]
116 Pages vs Layouts
117 Layouts vs Templates
118 Schema Changes
119 Working with Currencies (Bonus)
120 Working with Dates (Bonus)
121 Close DatePicker (Controlled Component)
122 Reset DatePicker (key)
123 Exposing Callback Handlers
124 Reset DatePicker (useImperativeHandle)
125 Dropdown Component
126 Ticket Status (Read)
127 Ticket Status (Write)
128 Update Toast Feedback
129 Confirm Dialog
130 Confirm Dialog from Dropdown (Advanced)
131 Delete Toast Feedback
132 Development vs Production
133 Vercel
134 Environment Variables
135 Other Environment Variables
136 Lucia [B]
137 Paths for Authentication
138 Sign Up
139 Sign In
140 Regression Bugs (Software Craftsmanship)
141 Authentication Status
142 Sign Out
143 Header (Server Component)
144 Header (Client Component)
145 The Authentication Flicker
146 One-to-Many Relation
147 Referential Actions
148 Non-Nullable Relation
149 Relation Queries
150 Exclude Sensitive Information
151 Protected Routes
152 Ownership
153 Protected APIs
154 Protected UI
155 All Tickets vs My Tickets
156 Sidebar
157 Authenticated Sidebar
158 Breadcrumbs
159 Tabs
160 Active Path (Fastest Levenshtein)
161 Account Dropdown
162 Route Groups
163 Private Folders
164 useSearchParams
165 searchParams [B]
166 Debounce Requests
167 Sort
168 Typed Search Params [B]
169 useQueryState
170 useQueryStates
171 Composite Key
172 Mediator Components
173 URL State
174 Offset-Based Pagination
175 Metadata in Pagination with Prop Drilling
176 Database Transactions
177 Interplay between Interactions (UX)
178 Dynamic Page Size
179 Route Handler
180 Route Params in Route Handler [B]
181 Search Params in Route Handler
182 Intro (with Challenge)
183 Many-to-One Relation
184 Read Comments
185 Create Comment
186 Delete Comment
187 Sequential Data Fetching
188 Parallel Data Fetching
189 Explicit Client Components
190 Implicit Client Components
191 Hydration Mismatch
192 Async Client Components
193 Client-Server Boundary
194 Client-Server Composition
195 use client
196 use server
197 Continuous Offset-Based Pagination
198 Initial State
199 Sliding Window
200 Client-Side State Remove Comment
201 Client-Side State Add Comment
202 TypeScript Generics (Bonus)
203 Delete Feedback (Toast)
204 Delete Feedback (Button)
205 Cursor-Based Pagination (Timestamp)
206 Cursor-Based Pagination (Unique ID)
207 Deliberate Over-Fetching
208 TypeScript Generics (Bonus)
209 React Query Provider
210 useInfiniteQuery
211 initialData
212 Refetch (Option 1)
213 Invalidate Query (Option 2)
214 Infinite Scroll
215 Custom Domain –
The Road to Next (Pro)
216 The Plan
217 Forgot Password (Public Page)
218 Password Reset Token
219 Password Reset Link
220 Reset Password (Public Page)
221 Reset Password (Public Page)
222 Change Password (Protected Page)
223 Many vs One Password Reset Token (Discussion)
224 Render Emails
225 Preview Emails
226 Resend
227 Custom Email Domain
228 Send Emails
229 Resend Dashboard
230 Why a Queue_
231 Inngest
232 Receive Events with Functions
233 Send Events
234 Recap
235 Type-Safe Events
236 Retries
237 Inngest + Vercel (Integration)
238 Explore Inngest
239 Is Verified Email
240 Redirect if not Verified
241 Email Verification Token
242 Generate Random Code
243 Email Verification Code
244 Verify Email with Code
245 Verify Email with Code
246 Verify Email with Code
247 Fine-Grained Authorization
248 Send Email Verification
249 Queue Email Verification
250 Resend Verification Email
251 Many-to-Many, Users-to-Organizations
252 Read Organizations
253 Never Trust the Client, Trust the Server
254 Do not Over-Fetch …
255 but keep the information you need
256 Redirect if no Organization …
257 but do not introduce Regression Bugs (Software Craftsmanship)
258 Require Organization during Onboarding
259 Create More Organization
260 Manage Organization
261 One-Way Relation and Referential Integrity
262 Switch Organization (Idempotent Operation) [C] – The Road to Web
263 Switch Organization (Idempotent Operation) [C] – The Road to Web
264 Investigating (Software Craftsmanship) – The Road to Web
265 Compound Key – The Road to Web
266 Require Default Organization
267 Require Default Organization
268 Require Default Organization
269 Impossible States (Interactive Transactions)
270 Delete Organization
271 Client-Side Refresh
272 Limited Access
273 Read Memberships
274 Delete Membership
275 Leave Organization
276 Database Schema
277 Protected Admin Routes
278 Protected Admin UI
279 Protected Admin API
280 Protected Admin API
281 Change Role
282 Actual Use Case Tickets belong to Organizations
283 Create Ticket in Organization
284 Read Tickets by Organization
285 Manage Permissions
286 Authorize based on Permission (1)
287 Authorize based on Permission (2)
288 Do not trust the UI
289 Database Model
290 Unique Constraints
291 Read Invitations
292 Read Invitations
293 Invite by Email
294 Invitation Token & Link
295 Invitation Email
296 Queue Invitation
297 Queue and Send Invitation
298 Accept Invitation Strategies
299 Accept Invitation as User
300 Accept Invitation as Anonymous [C]
301 Revoke Invitation
302 Amazon AWS S3
303 Amazon AWS IAM
304 AWS SDK for JavaScript
305 Tickets with Attachments
306 Upload Files
307 File Validation
308 Store Files in Amazon S3
309 List Attachments
310 Delete Attachments from Database
311 Delete Files from Amazon S3
312 Synchronize AWS S3 with Database
313 Download Files with Presigned URLs
314 From Files to Folders
315 Custom Hook Extraction
316 Variable Extraction
317 Component Extraction
318 Render Prop Component
319 Polymorphic Relationship
320 Read Polymorphic Relations
321 Create a Polymorphic Relation
322 Type Guards in TypeScript
323 Helper Functions
324 Delete a Polymorphic Relation
325 Sign a Polymorphic Relation
326 Intro (Challenge)
327 Polymorphic Comments
328 Limits of the Client-Server Boundary (Discussion)
329 N+1 Problem (Discussion)
330 Nested Fetch
331 Invalidate Client-Side Cache
332 Isomorphic Components (Discussion)
333 Use Case for Layer(s)
334 Service Layer
335 Descriptive Layers
336 The Case for Barrel Files
337 Error Handling across Layers
338 Reuse Schema
339 Reuse Service
340 Service Layer to Data Layer
341 API Layer to Data Layer
342 Dynamic Include Statement
343 Function Overloads (Discussion)
344 Why DTOs
345 Implement DTO
346 Usage DTO (Create Attachments)
347 Usage DTO (Delete Attachment)
348 Usage DTO (Sign Attachment)
349 Usage DTO (Create Comment)
350 Ticket-to-Ticket Relations
351 List Ticket References
352 Connect Ticket Reference
353 Disconnect Ticket Reference
354 Embed Ticket Reference by ID
355 Organization-Level Creadentials
356 Create Credential
357 Show Once, Copy Secret
358 Obfuscate Secrets
359 Protected API
360 Bearer Authorization
361 Exclude Sensitive Information (Discussion)
362 Timing Attack
363 Enumeration Attack
364 Throttling Token Generation
365 Client-Side Guardrails Preventing UI-Level Misuse
366 Server-Side Guardrails Stricter Validation
367 Injection & Sanitization (Discussion)
Resolve the captcha to access the links!