The Road to Next
More
This is not just a video course. Step by step, you will create your own starter project to immediately apply the knowledge you gain. Build and deploy a SaaS product, gaining practical experience with the tools and techniques used by industry professionals. I have put all the experience I have accumulated over the past years of work, both in employment and freelancing, into this course, and I hope it will help you achieve success.
This course is for those who want to reach a senior level, for those seeking an advanced course in React or backend development, for those wanting to transition from frontend to full-stack development, and for those who want to create real SaaS products. It's perfect for beginner developers looking to deepen their understanding of complex engineering principles, and for those who want to master advanced concepts in React and Next.js in the context of full-stack development.
So, ready to become a full-stack developer with me?
Let's get started :)
Technology Stack
Next.js 15
The most popular full-stack framework for React
Used by the largest companies worldwide, Next.js allows you to create high-quality web applications using the power of React components.
React 19
The most popular frontend framework
React allows building user interfaces from individual pieces called components. Create your React components and combine them into entire screens, pages, and applications.
Prisma
The next-generation TypeScript ORM
Prisma offers the best DX for your team to work with databases. Even complex aspects like connection pooling, caching, and real-time subscriptions become feasible.
Supabase
Serverless Postgres
Supabase is an open alternative to Firebase. Start your project with a Postgres database and add additional services as needed.
TypeScript
Type-safe JavaScript as the industry standard
Unlock the power of TypeScript: dive into a world where strict typing makes code more reliable. Gain confidence to tackle complex tasks.
Zod
TypeScript-based schema validation
Zod provides safe schema validation in TypeScript, reducing errors and maintaining data integrity through concise syntax and seamless integration with TypeScript.
Oslo
Vendor-neutral authentication
Oslo.js is a lightweight, typed authentication library offering support for JWT, OAuth2, password hashing, WebAuthn verification, and cryptographic tools for secure authentication.
Vercel
The best platform for deploying Next.js
Vercel is a cloud platform for quickly deploying and scaling modern web projects. Offering seamless integration with Next.js, Vercel is perfectly suited for this technology stack.
Tailwind
Industry standard for CSS styles
Tailwind CSS is a highly customizable utility-first CSS framework that simplifies the styling process by providing a comprehensive set of ready-to-use classes.
Shadcn/UI
Popular library of reusable components
Discover a collection of meticulously crafted components ready for seamless integration into your applications. The components are accessible, fully customizable, and open-source.
Watch Online The Road to Next
| # | Title | Duration |
|---|---|---|
| 1 | Welcome to The Road to Next | 06:56 |
| 2 | Software to create Software | 01:33 |
| 3 | Visual Studio Code (VSCode) | 02:32 |
| 4 | External Terminal (Optional) | 01:44 |
| 5 | Browser | 02:26 |
| 6 | Node | 02:53 |
| 7 | NPM | 02:02 |
| 8 | Manual setup in Next | 09:38 |
| 9 | JSX | 02:34 |
| 10 | Components | 03:22 |
| 11 | Props | 03:07 |
| 12 | Styling | 01:14 |
| 13 | Interactions | 02:28 |
| 14 | State | 03:01 |
| 15 | Composition | 03:34 |
| 16 | File Extraction | 01:07 |
| 17 | Outro | 01:48 |
| 18 | What are pitfalls? | 01:21 |
| 19 | Restarting Things | 02:22 |
| 20 | Wrong (Auto) Imports | 01:49 |
| 21 | npm install --force | 02:13 |
| 22 | Breaking Changes | 02:05 |
| 23 | create-next-app | 06:59 |
| 24 | Next 15 & React 19 | 02:53 |
| 25 | Exploring the Starter | 06:54 |
| 26 | Git & GitHub | 05:55 |
| 27 | Deploy | 04:18 |
| 28 | Exploring the finished Project | 09:30 |
| 29 | Script | 04:22 |
| 30 | Import Sort | 03:05 |
| 31 | Pages | 05:01 |
| 32 | Static and Dynamic Routes [B] | 05:06 |
| 33 | Link Components | 07:07 |
| 34 | Absolute Imports | 00:48 |
| 35 | Path Constants | 02:08 |
| 36 | Layout | 05:21 |
| 37 | Script | 02:22 |
| 38 | const Assertions | 04:06 |
| 39 | Tailwind CSS [C] | 04:45 |
| 40 | Tailwind CSS in Next | 08:26 |
| 41 | Conditional Style | 01:50 |
| 42 | Animations with Tailwind | 02:30 |
| 43 | SVGs | 02:15 |
| 44 | Setup [B] | 06:05 |
| 45 | Button | 04:40 |
| 46 | Card | 06:25 |
| 47 | Separator | 02:14 |
| 48 | Icons [C] | 05:17 |
| 49 | Theming | 02:22 |
| 50 | Heading | 04:34 |
| 51 | Header | 02:23 |
| 52 | Placeholder | 09:43 |
| 53 | Intro [B] | 01:48 |
| 54 | Extract | 04:35 |
| 55 | Modify | 04:26 |
| 56 | Reuse | 05:00 |
| 57 | Recap | 03:52 |
| 58 | Implementation | 13:16 |
| 59 | Data Fetching in Client Components | 09:45 |
| 60 | Characteristics of Client Components | 02:17 |
| 61 | Client-Server Boundary [C] | 05:04 |
| 62 | Client-Server Composition | 04:00 |
| 63 | Data Fetching in Server Components | 06:18 |
| 64 | SSR vs Server Components | 02:41 |
| 65 | Server-Side Rendering | 04:11 |
| 66 | Streaming | 03:41 |
| 67 | Suspense | 02:50 |
| 68 | Introduction | 00:54 |
| 69 | Loading Route | 03:34 |
| 70 | Error Route | 02:56 |
| 71 | Error Boundary (Optional) | 02:00 |
| 72 | Not Found Route | 02:00 |
| 73 | Nearest Boundary Bubbling | 03:11 |
| 74 | Connect to Database | 07:22 |
| 75 | Prisma | 01:30 |
| 76 | Prisma Schema | 09:29 |
| 77 | Seeding the Database | 07:31 |
| 78 | Prisma Studio | 01:54 |
| 79 | Prisma Client | 02:21 |
| 80 | Database Queries | 06:03 |
| 81 | ORM generated Types | 01:52 |
| 82 | Typed APIs (Optional) | 04:40 |
| 83 | Server Actions in Client Components | 08:58 |
| 84 | Server Actions in Server Components | 04:03 |
| 85 | redirect | 01:14 |
| 86 | Development vs Production | 01:38 |
| 87 | Router Cache | 05:36 |
| 88 | Full Route Cache | 01:41 |
| 89 | Static vs Dynamic Rendering | 06:59 |
| 90 | Time-Based Cache (ISR) | 02:45 |
| 91 | On-Demand Caching (ISR) | 02:56 |
| 92 | Where do we cache? | 01:02 |
| 93 | Request Memoization | 05:46 |
| 94 | Generate Static Params (Optional) | 03:19 |
| 95 | Recap | 02:19 |
| 96 | Create Form | 12:13 |
| 97 | Configuration over Composition (Software Craftsmanship) | 03:46 |
| 98 | Edit Form [B] | 13:05 |
| 99 | DRY with Abstractions (Software Craftsmanship) | 08:17 |
| 100 | Progressive Enhancement | 02:50 |
| 101 | useTransition | 03:34 |
| 102 | useFormStatus | 04:24 |
| 103 | useActionState | 03:34 |
| 104 | Form Validation | 06:10 |
| 105 | Form Reset | 03:27 |
| 106 | Error Handling | 06:41 |
| 107 | Field Errors in Forms | 07:29 |
| 108 | Premature Optimization (Software Craftsmanship) | 07:31 |
| 109 | Action Callbacks | 12:50 |
| 110 | Debugging (Software Craftsmanship) | 07:58 |
| 111 | Toast Feedback | 05:58 |
| 112 | Form Abstraction | 04:55 |
| 113 | Cookie API [B] | 05:12 |
| 114 | Set Cookie [B] | 02:19 |
| 115 | Read Cookie [B] | 09:58 |
| 116 | Pages vs Layouts | 04:59 |
| 117 | Layouts vs Templates | 05:15 |
| 118 | Schema Changes | 05:48 |
| 119 | Working with Currencies (Bonus) | 10:39 |
| 120 | Working with Dates (Bonus) | 10:07 |
| 121 | Close DatePicker (Controlled Component) | 03:47 |
| 122 | Reset DatePicker (key) | 04:25 |
| 123 | Exposing Callback Handlers | 03:22 |
| 124 | Reset DatePicker (useImperativeHandle) | 04:56 |
| 125 | Dropdown Component | 06:23 |
| 126 | Ticket Status (Read) | 04:21 |
| 127 | Ticket Status (Write) | 06:31 |
| 128 | Update Toast Feedback | 02:20 |
| 129 | Confirm Dialog | 07:32 |
| 130 | Confirm Dialog from Dropdown (Advanced) | 07:53 |
| 131 | Delete Toast Feedback | 06:42 |
| 132 | Development vs Production | 04:39 |
| 133 | Vercel | 04:18 |
| 134 | Environment Variables | 02:57 |
| 135 | Other Environment Variables | 03:37 |
| 136 | Lucia [B] | 07:30 |
| 137 | Paths for Authentication | 01:42 |
| 138 | Sign Up | 12:07 |
| 139 | Sign In | 06:22 |
| 140 | Regression Bugs (Software Craftsmanship) | 04:01 |
| 141 | Authentication Status | 06:02 |
| 142 | Sign Out | 09:23 |
| 143 | Header (Server Component) | 04:42 |
| 144 | Header (Client Component) | 03:08 |
| 145 | The Authentication Flicker | 06:50 |
| 146 | One-to-Many Relation | 09:25 |
| 147 | Referential Actions | 02:37 |
| 148 | Non-Nullable Relation | 03:15 |
| 149 | Relation Queries | 02:21 |
| 150 | Exclude Sensitive Information | 03:12 |
| 151 | Protected Routes | 08:05 |
| 152 | Ownership | 05:36 |
| 153 | Protected APIs | 08:16 |
| 154 | Protected UI | 02:20 |
| 155 | All Tickets vs My Tickets | 04:34 |
| 156 | Sidebar | 09:52 |
| 157 | Authenticated Sidebar | 03:52 |
| 158 | Breadcrumbs | 06:11 |
| 159 | Tabs | 07:40 |
| 160 | Active Path (Fastest Levenshtein) | 08:34 |
| 161 | Account Dropdown | 04:34 |
| 162 | Route Groups | 03:09 |
| 163 | Private Folders | 05:33 |
| 164 | useSearchParams | 07:41 |
| 165 | searchParams [B] | 05:32 |
| 166 | Debounce Requests | 01:55 |
| 167 | Sort | 10:51 |
| 168 | Typed Search Params [B] | 08:05 |
| 169 | useQueryState | 09:53 |
| 170 | useQueryStates | 06:41 |
| 171 | Composite Key | 02:29 |
| 172 | Mediator Components | 06:19 |
| 173 | URL State | 10:50 |
| 174 | Offset-Based Pagination | 03:55 |
| 175 | Metadata in Pagination with Prop Drilling | 07:30 |
| 176 | Database Transactions | 02:09 |
| 177 | Interplay between Interactions (UX) | 06:13 |
| 178 | Dynamic Page Size | 03:24 |
| 179 | Route Handler | 05:36 |
| 180 | Route Params in Route Handler [B] | 03:40 |
| 181 | Search Params in Route Handler | 05:43 |
| 182 | Intro (with Challenge) | 01:38 |
| 183 | Many-to-One Relation | 06:25 |
| 184 | Read Comments | 10:53 |
| 185 | Create Comment | 11:24 |
| 186 | Delete Comment | 14:42 |
| 187 | Sequential Data Fetching | 08:06 |
| 188 | Parallel Data Fetching | 06:14 |
| 189 | Explicit Client Components | 10:36 |
| 190 | Implicit Client Components | 06:25 |
| 191 | Hydration Mismatch | 03:01 |
| 192 | Async Client Components | 02:29 |
| 193 | Client-Server Boundary | 01:33 |
| 194 | Client-Server Composition | 08:31 |
| 195 | “use client”; | 04:45 |
| 196 | “use server”; | 03:16 |
| 197 | Continuous Offset-Based Pagination | 06:50 |
| 198 | Initial State | 02:35 |
| 199 | Sliding Window | 02:59 |
| 200 | Client-Side State: Remove Comment | 06:03 |
| 201 | Client-Side State: Add Comment | 10:08 |
| 202 | TypeScript Generics (Bonus) | 02:45 |
| 203 | Delete Feedback (Toast) | 09:09 |
| 204 | Delete Feedback (Button) | 04:34 |
| 205 | Cursor-Based Pagination (Timestamp) | 05:58 |
| 206 | Cursor-Based Pagination (Unique ID) | 04:00 |
| 207 | Deliberate Over-Fetching | 03:53 |
| 208 | TypeScript Generics (Bonus) | 04:42 |
| 209 | React Query Provider | 05:05 |
| 210 | useInfiniteQuery | 07:47 |
| 211 | initialData | 05:36 |
| 212 | Refetch (Option 1) | 03:19 |
| 213 | Invalidate Query (Option 2) | 02:15 |
| 214 | Infinite Scroll | 04:50 |
| 215 | Custom Domain | 09:53 |
Similar courses to The Road to Next
The Software Architect Mindset (COMPLETE)ArjanCodes
REACT ROUTER (v6)ui.dev (ex. Tyler McGinnis)
Full-Stack React with GraphQL and Apollo Boostudemy
Go Full Stack with Spring Boot and Reactudemy
Mastering Maintainable Reactudemy
React and NodeJS: A Practical Guide with Typescriptudemy
React Node FullStack - Ecommerce from Scratch to Deploymentudemy
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQLfullstack.io
Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)udemy
