FFlauron
УвійтиРеєстрація
Курси/Середній → Senior

React + Next.js Pro: сучасний фронтенд

Production-React 2026: App Router, Server Components, Server Actions, TanStack Query, форми, тестування, performance. Від junior до senior-фронтенд інженера. З інтерактивними задачами в кожному уроці.

📚 14 модулів📝 31 уроків💻 53 задач⏱ 14 модулів · 31 урок

Програма курсу

Модуль 1. React 19: нові хуки, transitions, Suspense, error boundaries3 ур. · 8 зад.
  • ▶React 19: огляд нового — Actions, useOptimistic, use(), ref у props3 зад.Безкоштовно
  • 🔒Hooks deep-dive: useState/useEffect, useTransition, useDeferredValue3 зад.
  • 🔒Suspense, ErrorBoundary, концепція concurrent rendering2 зад.
Модуль 2. TypeScript для React: generics, типізація props/хуків2 ур. · 4 зад.
  • 🔒TypeScript для React: типізація props, children, refs2 зад.
  • 🔒Generics, discriminated unions, типізація hooks і API2 зад.
Модуль 3. Next.js 15 App Router: structure, routing patterns3 ур. · 6 зад.
  • 🔒Next.js 15 App Router: структура, layouts, routes2 зад.
  • 🔒Routing patterns: dynamic, catch-all, parallel, intercepting2 зад.
  • 🔒Loading, error, not-found — обробка станів на route2 зад.
Модуль 4. Server vs Client Components: правила та антипатерни2 ур. · 4 зад.
  • 🔒Server Components: коли і чому, мережа vs клієнт2 зад.
  • 🔒Client Components: 'use client', composition patterns2 зад.
Модуль 5. Server Actions: форми, mutations, validation2 ур. · 3 зад.
  • 🔒Server Actions: 'use server', mutations, revalidate2 зад.
  • 🔒Forms з Server Actions: useActionState, optimistic UI1 зад.
Модуль 6. Кешування Next.js: data, route, router cache2 ур. · 3 зад.
  • 🔒Кешування Next.js: data cache, full route cache, router cache2 зад.
  • 🔒Revalidation: revalidatePath, revalidateTag, on-demand1 зад.
Модуль 7. TanStack Query: client data, мутації, infinite query2 ур. · 3 зад.
  • 🔒TanStack Query: коли потрібен, queries, mutations2 зад.
  • 🔒Infinite queries, optimistic updates, синхронізація з SSR1 зад.
Модуль 8. Форми: react-hook-form + zod, Server Actions form2 ур. · 3 зад.
  • 🔒Форми: react-hook-form + zod, валідація, error handling2 зад.
  • 🔒Server Actions form patterns, file upload, multi-step1 зад.
Модуль 9. Стилізація: Tailwind v4, shadcn/ui, темна тема2 ур. · 3 зад.
  • 🔒Стилізація: Tailwind v4, темна тема, дизайн-токени2 зад.
  • 🔒shadcn/ui, варіанти компонентів, доступність1 зад.
Модуль 10. State management: Zustand, Jotai, context-pitfalls2 ур. · 3 зад.
  • 🔒State management: Context, Zustand, Jotai — коли що2 зад.
  • 🔒URL state, search params, server-driven UI1 зад.
Модуль 11. Auth: NextAuth/Auth.js, JWT, role-based access2 ур. · 3 зад.
  • 🔒Auth.js (NextAuth): OAuth, credentials, sessions, JWT2 зад.
  • 🔒Role-based access, middleware, захист routes1 зад.
Модуль 12. Performance: Web Vitals, image, font, code-splitting2 ур. · 3 зад.
  • 🔒Performance: Core Web Vitals, image, font optimization2 зад.
  • 🔒Bundle analyzer, code splitting, lazy loading, streaming1 зад.
Модуль 13. Тестування: Vitest + Testing Library + Playwright2 ур. · 4 зад.
  • 🔒Vitest + Testing Library: unit + integration tests2 зад.
  • 🔒Playwright E2E: critical paths, fixtures, CI/CD2 зад.
Модуль 14. Capstone: SaaS-дашборд з auth, БД, оплатою3 ур. · 3 зад.
  • 🔒Capstone (1/3): SaaS-дашборд — архітектура, auth, базова сторінка1 зад.
  • 🔒Capstone (2/3): дані, форми, Server Actions, оптимістика1 зад.
  • 🔒Capstone (3/3): performance, тести, деплой на Vercel1 зад.

Про курс

Про курс

Полний курс сучасного React-розробника. Не повторюємо useState — фокус на production-патернах: App Router, Server Components, кешування, форми, performance, тестування. На реальних проєктах.

Чого ви навчитеся

  • React 19: hooks, Suspense, transitions, useOptimistic
  • TypeScript для React: generics, типізація хуків, форм
  • Next.js 15+ App Router: layouts, loading, error, parallel/intercepting routes
  • Server Components vs Client Components: коли що
  • Server Actions: форми, mutations, revalidation
  • Кешування Next.js: data cache, full-route cache, router cache
  • TanStack Query для клієнтських даних
  • Форми: react-hook-form + zod, Server Actions form patterns
  • Стилі: Tailwind v4, CSS Modules, shadcn/ui
  • State management: Zustand, Jotai (коли не Redux)
  • Аутентифікація: NextAuth/Auth.js, JWT, OAuth
  • Performance: Core Web Vitals, image, font, bundle
  • Тестування: Vitest, Testing Library, Playwright E2E
  • Деплой: Vercel, self-host, Docker

Для кого

Розробники з базовим React (props, useState, useEffect). Знання TS бажане.

Інструменти

React 19, Next.js 15+, TypeScript, Tailwind v4, TanStack Query, react-hook-form, zod, NextAuth, Vitest, Playwright.