Этот курс - ваш путеводитель в создании и развертывании готовых к продакшену приложений на Next.js с использованием современных лучших практик.
Почему этот курс для вас
React стал сложнее, а экосистема Next.js кажется запутанной. Научиться использовать Next.js для создания продакшн-приложений - задача непростая, особенно без четкого руководства. Этот курс избавит вас от догадок и поможет сосредоточиться на действительно важных вещах.
Что вы изучите
Основы Next.js: что это такое и где его лучше использовать.
Создание кэширования, архитектуры компонентов и взаимодействие с серверными данными.
Бонусный модуль по React: введение в фундаментальные концепции.
Что делает этот курс уникальным
Практическое обучение: не просто теория, а выполнение упражнений, участие в интерактивных демо и создание нескольких приложений.
Реальные проекты: вы будете работать над приложениями, которые готовы к использованию в реальном мире.
Глубокое понимание: мы изучим не только "что", но и "почему" и "когда" использовать те или иные подходы.
Стек технологий курса
Next.js
TypeScript
React
Tailwind CSS
Prisma, MongoDB, NeonDB
NextAuth, Clerk
Stripe, Cloudflare, Vercel
Zod, React Query, Framer Motion
Для кого этот курс
Разработчиков, которые хотят перейти на новый уровень, изучив Next.js.
Тех, кто хочет создавать масштабируемые, продакшен-готовые приложения.
Начинающих и опытных программистов, стремящихся изучить современные практики.
Присоединяйтесь, чтобы научиться создавать приложения, которые не только работают, но и впечатляют. Этот курс - ваш первый шаг к освоению Next.js и созданию продвинутых приложений для реального мира.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Mystery Potion Page - Choosing the Right Fetching Strategy
Урок 142. 00:02:56
Create MP Page
Урок 143. 00:05:18
Fetch call
Урок 144. 00:01:08
Prod Build
Урок 145. 00:00:13
Commit
Урок 146. 00:06:33
Dynamic Server Usage
Урок 147. 00:00:41
Git commit
Урок 148. 00:05:39
Implementing Seamless Filters
Урок 149. 00:01:21
Search Params
Урок 150. 00:01:03
Filtering Potions
Урок 151. 00:04:30
Summary
Урок 152. 00:06:20
SEO
Урок 153. 00:03:27
Genmetadata
Урок 154. 00:00:11
Git Commit
Урок 155. 00:03:51
Deploy
Урок 156. 00:02:15
Review Final App
Урок 157. 00:05:34
What are Server and Client Components
Урок 158. 00:05:00
Exposing Server aPI keys
Урок 159. 00:00:13
Using Suspense in Next.js
Урок 160. 00:01:53
Intro to Analytics Dashboard
Урок 161. 00:02:59
Intro to Analytics Dashboard (1)
Урок 162. 00:02:59
App Demo Pulse Analytics Dashboard
Урок 163. 00:03:39
Tech Stack
Урок 164. 00:06:28
Pulse Tour_ How This Next.js App Is Structure
Урок 165. 00:03:27
Fixing Slow Navigation in Next.js
Урок 166. 00:00:55
Fixing Slow Navigation in Next.js (1)
Урок 167. 00:05:58
Progressive Rendering in Next.js_ Making Layouts Feel Instant
Урок 168. 00:02:39
Fixing Layout Shift in Next.js_ Why CLS Hurts Your UX (and SEO)
Урок 169. 00:05:53
Highlighting the Active Insight_ Making Navigation State Visual in Next.js
Урок 170. 00:03:37
Highlight the Active Insight_ Solving the Client vs Server Challenge in Next.js
Урок 171. 00:02:46
Rendering Without Blocking
Урок 172. 00:03:47
Modern Search with Next.js Form
Урок 173. 00:00:46
Modern Search with Next.js Form (1)
Урок 174. 00:00:26
Modern Search with Next.js Form (2)
Урок 175. 00:04:00
Add Visual Feedback to Search
Урок 176. 00:05:57
Updating URL in Real Time
Урок 177. 00:02:13
Build Context-Aware Search
Урок 178. 00:01:09
Prevent Scroll Jumps During Live Search
Урок 179. 00:03:16
Use Transition to Show Loading Feedback
Урок 180. 00:06:55
Build Dynamic Filters with URL State Suspense and Optimistic UI
Урок 181. 00:06:00
Build Dynamic Filter Options from Prisma
Урок 182. 00:03:32
Apply Filters Dynamically to Visitor Journeys
Урок 183. 00:04:41
Show Loading Feedback Instantly
Урок 184. 00:03:58
Make Visitor Filters Feel Instant
Урок 185. 00:03:57
Avoid Refetching with Staletimes
Урок 186. 00:03:19
Build Analytics Info Query with Prisma
Урок 187. 00:03:59
Build Analytics Info Query with Prisma (1)
Урок 188. 00:03:29
Partial Pre-rendering in Pulse
Урок 189. 00:03:21
PPR in Action_ Analytics Dashboard
Урок 190. 00:08:53
Deploying Prisma and Pulse to Production
Урок 191. 00:02:36
Summary_ Pulse Analytics Dashboard
Урок 192. 00:02:07
Introduction to Stockorama App
Урок 193. 00:01:49
Tech Stack for Stockorama App
Урок 194. 00:01:24
Create Stockorama App
Урок 195. 00:11:24
Stockorama App Styling
Урок 196. 00:03:31
Introducing Server Actions
Урок 197. 00:01:31
Where would we need Server Actions_
Урок 198. 00:05:29
Server Actions vs API Routes in Practice
Урок 199. 00:01:04
Server Actions vs API Routes in Practice (1)
Урок 200. 00:02:06
Redirects with Server Actions
Урок 201. 00:02:20
Introducing MongoDB and Prisma
Урок 202. 00:03:46
Setup MongoDB and Prisma
Урок 203. 00:05:04
App Architecture Stockorama App
Урок 204. 00:02:30
Creating a new Product with Server Actions
Урок 205. 00:02:00
Refactoring into a new Server file
Урок 206. 00:05:31
Using useActionState for form handling
Урок 207. 00:00:36
Form data validation in Create Product
Урок 208. 00:02:22
What is Zod_
Урок 209. 00:04:18
Validating form fields with Zod
Урок 210. 00:04:48
Validating form fields with Zod (1)
Урок 211. 00:02:56
Store Products temporarily and Redirects
Урок 212. 00:01:17
Store Products temporarily and Redirects (1)
Урок 213. 00:01:36
Setting up Mongodb in Stockorama App
Урок 214. 00:03:29
Setting up Mongodb in Stockorama App (1)
Урок 215. 00:04:46
Setting up Mongodb in Stockorama App (2)
Урок 216. 00:05:52
Setting up Mongodb in Stockorama App (3)
Урок 217. 00:00:43
Setting up Mongodb in Stockorama App (4)
Урок 218. 00:05:57
Products Page Structure
Урок 219. 00:03:07
Fetching and Displaying Products with Prisma
Урок 220. 00:03:48
Like Component in Stockorama App
Урок 221. 00:04:30
Like Component in Stockorama App (1)
Урок 222. 00:01:49
Why do we need useOptimistic_
Урок 223. 00:04:43
Using useOptimistic for Instant UI Feedback
Урок 224. 00:02:57
Loading States with Like Button
Урок 225. 00:06:09
Building Products Page with Next.js
Урок 226. 00:02:39
How Server Actions get Exposed_
Урок 227. 00:03:08
Final Project Demo - Stockorama App
Урок 228. 00:01:59
How I Architected My Course Platform
Урок 229. 00:05:41
How I Architected My Course Platform (1)
Урок 230. 00:04:18
How I Architected My Course Platform (2)
Урок 231. 00:05:03
How I Architected My Course Platform (3)
Урок 232. 00:01:18
How I Architected My Course Platform (4)
Урок 233. 00:02:21
Creating a Merito Next.js App
Урок 234. 00:03:45
Building the Landing Page
Урок 235. 00:03:24
Building the Landing Page (1)
Урок 236. 00:07:19
Creating a Resusable Header
Урок 237. 00:03:51
Set Up shadcn_ui in Next.js
Урок 238. 00:06:13
Building the Banner Section
Урок 239. 00:05:37
Building the Banner Section (1)
Урок 240. 00:00:41
Building the Banner Section (2)
Урок 241. 00:11:25
Why Testimonials Matter
Урок 242. 00:03:51
Building the Pricing UI Section
Урок 243. 00:08:07
Building the Pricing UI Section (1)
Урок 244. 00:04:04
Build a CTA Section in Next.js
Урок 245. 00:01:39
Adding a Footer
Урок 246. 00:04:28
Introduction to Auth in Merito
Урок 247. 00:05:15
Set Up Clerk Authentication in Next.js
Урок 248. 00:00:45
Set Up Clerk Authentication in Next.js (1)
Урок 249. 00:02:48
Create Custom Sign In and Sign Up Pages with Clerk in Next.js
Урок 250. 00:01:30
Protect Routes with Clerk Middleware in Next.js
Урок 251. 00:04:34
Build an Auth Layout for Sign In_Up in Next.js
Урок 252. 00:02:54
Verify Users in the Clerk Dashboard
Урок 253. 00:01:47
Introduction to Dashboard in Merito
Урок 254. 00:05:52
Creating a Separate Dashboard Layout with Route Groups
Урок 255. 00:05:28
Building the Dashboard Cards
Урок 256. 00:04:34
Building the Dashboard Cards (1)
Урок 257. 00:01:47
Merito App Data Layer_ Neon Postgres and Prisma ORM
Урок 258. 00:03:22
Setting Up Neon Postgres for the Merito App
Урок 259. 00:03:31
Set Up Prisma with Neon in Next.js
Урок 260. 00:04:07
Designing the Merito Database Schema
Урок 261. 00:03:33
Create Prisma Schema for Merito App
Урок 262. 00:02:37
Seed Neon Postgres and Replace Mock Data in the Dashboard
Урок 263. 00:06:30
Replace Dashboard Mock Data with Real Prisma Data
Урок 264. 00:01:50
Refactor Forms Query into a Server-Only Lib
Урок 265. 00:03:33
Server-Only vs “use server”_ Keep Backend Code Off the Client
Урок 266. 00:02:26
Delete Testimonial Forms with Server Actions (Secure + Revalidation)
Урок 267. 00:03:19
Delete Form from Dashboard with Server Action
Урок 268. 00:02:40
Delete Form from Dashboard with Server Action (1)
Урок 269. 00:03:59
Dashboard Delete Form Action
Урок 270. 00:04:11
Dashboard Delete Form Action (1)
Урок 271. 00:04:11
User Feedback with Toasts (Sonner + shadcn_ui)
Урок 272. 00:02:30
User Feedback with Toasts (Sonner + shadcn_ui) (1)
Урок 273. 00:04:29
Make Delete Non-Blocking with useTransition
Урок 274. 00:02:40
Secure Form Deletion_ Validate Authorize Revalidate
Урок 275. 00:03:59
Secure Form Deletion_ Validate Authorize Revalidate (1)
Урок 276. 00:04:11
Secure Form Deletion_ Validate Authorize Revalidate (2)
Урок 277. 00:01:46
Recap_ Building Production-Ready Form Deletion
Урок 278. 00:02:12
Create a Form (Modal + Validation + Server Action)
Урок 279. 00:05:34
Why Use React Hook Form for the Create Form
Урок 280. 00:02:41
Validate the Create Form with Zod + React Hook Form
Урок 281. 00:00:58
Validate the Create Form with Zod + React Hook Form (1)
Урок 282. 00:11:05
Building the Create Form with React Hook Form Zod and shadcn_ui
Урок 283. 00:03:37
Create Form Dialog (shadcn_ui) with Controlled Open State
Урок 284. 00:01:57
Execute Create Form with FormData and a Typed Server Action
Урок 285. 00:03:23
Hooking Up the Create Form with useActionState in Next.js
Урок 286. 00:03:16
Persist Form with Prisma and Consistent Error Handling
Урок 287. 00:05:30
Short IDs with nanoid + Success UI for the Create Form
Урок 288. 00:02:09
Build the Reviews Page with Dynamic Data Embeds and Wall of Love
Урок 289. 00:02:40
Create a Dynamic Reviews Route by Form ID in Next.js
Урок 290. 00:06:40
Build Reviews Page Header_ Params Layout and Actions in Next.js
Урок 291. 00:01:14
Server vs Client Components on the Reviews Page
Урок 292. 00:00:54
Fetch Form Details and Testimonials by formId in Next.js
Урок 293. 00:07:08
Fetch Form Details and Testimonials by formId in Next.js (1)
Урок 294. 00:03:56
Fetch Testimonials by Form ID in Next.js with Prisma
Урок 295. 00:03:41
Create a Responsive Testimonials Grid with Cards in Next.js
Урок 296. 00:06:28
Add Ratings Dates and Status Badges to Testimonial Cards in Next.js
Урок 297. 00:02:14
Build a “Wall of Love” with a Testimonials List in Next.js
Урок 298. 00:04:43
Build a Copy Code Button with Toast Feedback in Next.js
Урок 299. 00:01:24
Build a Copy Code Button with Toast Feedback in Next.js (1)
Урок 300. 00:02:43
Build a Copy Code Button with Toast Feedback in Next.js (2)
Урок 301. 00:06:54
Embed Section Component for the Reviews Page
Урок 302. 00:04:17
Custom Not Found Page for Missing Review Forms in Next.js
Урок 303. 00:05:34
Adding Approve and Reject Buttons for Testimonials in Next.js
Урок 304. 00:09:28
Building the Update Testimonial Status Action
Урок 305. 00:04:09
Test Approve_Reject Workflow & Sort Testimonials in Next.js (Prisma)
Урок 306. 00:04:18
Test Approve_Reject Workflow & Sort Testimonials in Next.js (Prisma) (1)
Урок 307. 00:00:53
Roadmap_ Build Responses Embed and Feedback Preview Pages in Next.js
Урок 308. 00:01:25
Architecture Overview_ Responses & Embed Pages for Testimonials in Next.js
Урок 309. 00:06:27
Build a Public Embed “Wall of Love” Page in Next.js
Урок 310. 00:01:30
Build a Public Embed “Wall of Love” Page in Next.js (1)
Урок 311. 00:02:17
Public Embed Route for Testimonials
Урок 312. 00:01:56
Add Footer to Landing & Split Layouts for a Clean Public Embed (Next.js)
Урок 313. 00:02:07
Copy & Test the Wall of Love Embed Code in Next.js (Iframe)
Урок 314. 00:03:27
Fix Next.js Hydration Errors_ Invalid HTML Browser Parsing & Mismatched DOM
Урок 315. 00:02:50
Next.js Hydration Errors_ Common Examples & How to Fix Them
Урок 316. 00:04:25
Fix Hydration Errors in Create Form Dialog & Dashboard Cards (asChild + No Nested Links)
Урок 317. 00:01:43
Build an AI Feedback Form with React Hook Form and Server Actions
Урок 318. 00:03:42
Create a Public Feedback Form Page in Next.js
Урок 319. 00:02:48
Architecting a Public AI Feedback Form in Next.js
Урок 320. 00:03:44
Build a Centered Public Feedback Wrapper & Extract the AI Feedback Form Component
Урок 321. 00:02:34
Build the AI Feedback Form_ RHF + Zod Loading States and Accept_Keep Original
Урок 322. 00:06:14
Define a Zod Feedback Schema & Wire Up React Hook Form (Next.js + shadcn_ui)
Урок 323. 00:04:03
Create a Typed FormField Wrapper for the AI Feedback Form
Урок 324. 00:02:33
Add a Reusable Star Rating Field to the AI Feedback Form (RHF + shadcn_ui)
Урок 325. 00:00:40
Add a Reusable Star Rating Field to the AI Feedback Form (RHF + shadcn_ui) (1)
Урок 326. 00:06:59
Building an Interactive Star Rating with Optimal Client_Server Splits
Урок 327. 00:01:19
Submit Testimonial with a Server Action (Prisma + Zod)
Урок 328. 00:06:47
Create a Testimonial in Prisma with a Next.js Server Action
Урок 329. 00:03:03
Redirect to a Thank You Page After Testimonial Submission
Урок 330. 00:03:03
Add Loading and Success States to Testimonial Submission with useActionState
Урок 331. 00:04:25
Server vs Client Redirects After Testimonial Submission
Урок 332. 00:02:03
Build a Thank You Page for Testimonial Submissions
Урок 333. 00:08:51
Design a Polished Thank You Page for Testimonial Submissions
В материалах курса находятся HTML-файлы. Все видео из этих файлов доступны в онлайн-плеере. Курс еще не завершен автором, но основные модули готовы.
The course materials include HTML files containing all the necessary information for learning. All videos from these files are available in the online player. The course is not yet fully completed by the author, but the main modules are already done.
Я - преподаватель, разработчик и старший инженерный лидер в области технологий. Живу и работаю в Торонто, Канада. Как опытный наставник, я делюсь знаниями не только о техническом росте, но и о развитии карьеры Если вы хотите перейти в сферу разработки, являетесь начинающим разработчиком, хотите прокачать свои навыки или ищете способы выйти на новый уровень - этот канал именно для вас!
Those who are interested to learn more from this author, you can learn from the complete nextjs mastery course from zerotomastery.io by the same author Complete Next.js Developer in 2025: Zero to Mastery
Need Updates
Complete Next.js Developer in 2025: Zero to Mastery