English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 215 Lessons (18h 15m) | 3.08 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.
EARLY ACCESS. PRO version of the course still in progress by author, will be released later.
Table of Contents
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 Introduction
69 Loading Route
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
Resolve the captcha to access the links!