Omnex.Study
Курсы / Программирование

Next.js: fullstack на React

Собери на одном React полноценное приложение с сервером, базой и авторизацией — от App Router и серверных компонентов до Server Actions, кеша и боевого деплоя.

Продвинутый35 часов модулей уроковДоступ навсегда
4 9907 990
Начать бесплатно — первый модуль в подарок

Разовая оплата, без подписки. Школьнику курс покупает родитель из кабинета parents.omnex.study.

О КУРСЕ

Ты уже умеешь писать на React, но чистый React — это половина приложения. Клиентский рендеринг тормозит на слабых устройствах, SEO страдает, а любой запрос к базе всё равно требует отдельного бэкенда. Next.js закрывает этот разрыв: один React-код работает и на сервере, и на клиенте, а между ними — умный кеш, стриминг и серверные мутации без написания отдельного API.

Этот курс — про Next.js 15 и App Router в том виде, в котором на нём пишут в 2025 году: серверные компоненты по умолчанию, `async`-запросы прямо в разметке, Server Actions вместо REST-ручек, точечная ревалидация кеша. Ты не будешь заучивать устаревшие `getServerSideProps` — сразу возьмёшь современную модель, за которую платят.

Мы идём от каркаса приложения к боевому продакшену: роутинг и лейауты, границы server/client, загрузка данных и кеш, мутации и формы, свой API и middleware, аутентификация через Auth.js, оптимизация Core Web Vitals, тесты на Vitest и Playwright, деплой на Vercel и в Docker. Пять проектов в портфолио — от каталога с базой до fullstack-приложения под ключ.

К финалу у тебя будет не набор разрозненных знаний, а собранное приложение и понимание, почему оно устроено именно так. Fullstack-React — одна из самых оплачиваемых ниш на рынке, и после курса ты сможешь занять в ней своё место.

РЕЗУЛЬТАТ

Чему научишься.

ПРОГРАММА

модулей, уроков.

01

Модуль 1. Next.js и App Router: фундамент

Бесплатный модуль

Зачем Next.js тому, кто уже знает React, как поднять проект за минуту, как работает файловый роутинг, вложенные лейауты и клиентская навигация. В конце — каркас многостраничного сайта в портфолио.

  • Зачем Next.js, если ты и так знаешь ReactТеория · 24 мин
  • Первый проект: create-next-app и что внутриТеория · 26 мин
  • Файловый роутинг: страницы из папокТеория · 26 мин
  • Layout: обёртка, которая не перерисовываетсяТеория · 25 мин
  • Навигация: Link и клиентские переходыТеория · 24 мин
  • Практикум: каркас многостраничного сайтаПрактика · 45 мин
  • Квиз: App RouterТест · 16 мин
02

Модуль 2. Рендеринг: Server и Client Components

Главная ментальная модель Next.js: где выполняется код. Серверные компоненты по умолчанию, клиентские через "use client", граница между ними и композиция, асинхронные параметры, стратегии SSR/SSG/ISR и стриминг через Suspense. В финале — гибридная страница профиля.

  • Server Components: где на самом деле выполняется кодТеория · 28 мин
  • Client Components и директива use clientТеория · 27 мин
  • Граница server/client и композицияТеория · 27 мин
  • Динамические сегменты и async paramsТеория · 25 мин
  • SSR, SSG, ISR: три способа отдать страницуТеория · 28 мин
  • Стриминг: loading, Suspense и errorТеория · 27 мин
  • Практикум: гибридная страница профиляПрактика · 48 мин
  • Квиз: рендерингТест · 17 мин
03

Модуль 3. Данные: загрузка и кеш

Загрузка данных прямо на сервере: fetch и его дедупликация, кеш данных с revalidate и тегами, параллельные и последовательные запросы, прямой доступ к базе через Prisma, generateStaticParams и ISR. Первый большой проект — каталог товаров с базой и фильтрами.

  • fetch в Server Components и дедупликацияТеория · 26 мин
  • Кеш данных: revalidate и тегиТеория · 28 мин
  • Параллельная и последовательная загрузкаТеория · 25 мин
  • Prisma: прямой доступ к базе в компонентеТеория · 28 мин
  • generateStaticParams и ISR на практикеТеория · 26 мин
  • Проект: каталог товаров с базой и фильтрамиПроект · 90 мин
  • Квиз: данныеТест · 17 мин
04

Модуль 4. Мутации: Server Actions

Менять данные без единой API-ручки: Server Actions и директива "use server", формы с useActionState, pending-состояния через useFormStatus, валидация с Zod, ревалидация и redirect после мутации, оптимистичный UI. Проект — приложение заметок с полным CRUD.

  • Server Actions: мутации без API-ручекТеория · 27 мин
  • Формы и useActionStateТеория · 27 мин
  • useFormStatus и состояние отправкиТеория · 24 мин
  • Валидация форм с ZodТеория · 27 мин
  • Ревалидация и redirect после мутацииТеория · 25 мин
  • useOptimistic: мгновенный откликТеория · 26 мин
  • Проект: приложение заметок с полным CRUDПроект · 95 мин
  • Квиз: мутацииТест · 17 мин
05

Модуль 5. Route Handlers, Middleware и API

Когда нужен настоящий HTTP-эндпоинт: Route Handlers для своего API, динамические роуты и чтение тела запроса, работа с cookies и headers, middleware для перехвата запросов до рендера, стриминг ответов и приём вебхуков. Проект — публичный REST API с вебхуком.

  • Route Handlers: свой API внутри NextТеория · 26 мин
  • Динамические роуты, query и тело запросаТеория · 26 мин
  • Cookies и headers в Route HandlersТеория · 25 мин
  • Middleware: перехват до рендераТеория · 27 мин
  • Стриминг ответов и вебхукиТеория · 26 мин
  • Проект: публичный REST API с вебхукомПроект · 90 мин
  • Квиз: Route Handlers и middlewareТест · 17 мин
06

Модуль 6. Аутентификация и сессии

Кто ты и что тебе можно: разница аутентификации и авторизации, хеширование паролей и сессии на куках своими руками, готовое решение Auth.js (NextAuth v5), защита роутов через middleware и auth(), роли и права. Проект — приложение с логином и личным кабинетом.

  • Аутентификация в Next: обзор подходовТеория · 25 мин
  • Сессии на куках своими рукамиТеория · 28 мин
  • Auth.js (NextAuth v5): настройкаТеория · 28 мин
  • Защита роутов: middleware и auth()Теория · 26 мин
  • Роли и авторизацияТеория · 25 мин
  • Проект: приложение с логином и личным кабинетомПроект · 100 мин
  • Квиз: аутентификацияТест · 17 мин
07

Модуль 7. Оптимизация, SEO и UX

Делаем приложение быстрым и заметным: next/image для картинок, next/font для шрифтов без сдвигов, метаданные и Open Graph, Core Web Vitals и что на них влияет, разбиение бандла через dynamic import, параллельные и перехватывающие роуты. Практикум — ускорение медленной страницы.

  • next/image: картинки без болиТеория · 26 мин
  • next/font: шрифты без сдвиговТеория · 24 мин
  • Метаданные и Open GraphТеория · 26 мин
  • Core Web Vitals и что на них влияетТеория · 26 мин
  • Бандл, dynamic import и ленивая загрузкаТеория · 26 мин
  • Параллельные и перехватывающие роутыТеория · 27 мин
  • Практикум: ускорение медленной страницыПрактика · 50 мин
  • Квиз: оптимизация и SEOТест · 17 мин
08

Модуль 8. Тесты, деплой и продакшн

Доводим приложение до боевой готовности: переменные окружения и конфигурация, обработка ошибок в продакшне, юнит-тесты на Vitest и Testing Library, E2E на Playwright, деплой на Vercel и в Docker через standalone. Финальный проект — fullstack-приложение под ключ и разбор профессии.

  • Переменные окружения и конфигурацияТеория · 25 мин
  • Обработка ошибок в продакшнеТеория · 25 мин
  • Юнит-тесты: Vitest и Testing LibraryТеория · 27 мин
  • E2E-тесты с PlaywrightТеория · 26 мин
  • Деплой на VercelТеория · 24 мин
  • Свой сервер: Docker и standaloneТеория · 27 мин
  • Финальный проект: fullstack-приложение под ключПроект · 120 мин
  • Квиз: продакшнТест · 18 мин
ИНСТРУМЕНТЫ

С чем будешь работать.

Next.js 15React 19TypeScriptApp RouterServer ActionsPrismaPostgreSQLZodAuth.js (NextAuth v5)Tailwind CSSVitestPlaywrightVercelDocker

Next.js: fullstack на React: первый модуль — бесплатно.

Начать бесплатно — первый модуль в подарок
Next.js: fullstack на React | Omnex.Study