К содержанию
Первый Коммит

Вёрстка и фронтендПродвинутый

Курс Next.js 16

Next.js 16 и React 19: файловая маршрутизация, серверные компоненты, рендеринг и кеширование, работа с данными и деплой.

Материалы подготовлены с применением технологий искусственного интеллекта под редакцией автора, версии используемых библиотек и инструментов проверены и обновлены. Подробнее в оферте.

Модулей
14
Ак. часов
132
Разделов
144

Что нужно знать заранее. React и основы JavaScript, базовый TypeScript.

2 100 ₽

Весь курс навсегда, вместе с обновлениями. Первые 2 модуля открыты бесплатно и без регистрации.

Купить курс
Обложка курса Next.js

Модули курса

  1. 1Введение и основы Next.jsБесплатноNext.js — это React-фреймворк для создания полнофункциональных веб-приложений. Он предоставляет инструменты и конфигурацию, необходимые для React, и добавляет…Что такое Next.jsУстановкаСтруктура проектаФайловая маршрутизация
  2. 2React Server Components (RSC)БесплатноВ Next.js App Router все компоненты по умолчанию серверные (Server Components). Это фундаментальное отличие от классического React, где все компоненты — клиентские…Серверные vs клиентские компоненты"use client"КомпозицияSuspense и стриминг
  3. 3Стилизация и UICSS Modules — это CSS-файлы, где все классы автоматически получают уникальные имена. Это предотвращает конфликты стилей между компонентами.CSS ModulesTailwind CSSshadcn/uinext/fontnext/imagemetadata
  4. 4Навигация и маршрутизация (глубже)Компонент <Link> из Next.js — это расширенный <a>, который обеспечивает клиентскую навигацию без перезагрузки страницы и предзагрузку маршрутов.LinkuseRouterusePathnameПараллельные маршрутыIntercepting RoutesMiddleware
  5. 5Получение данных (Data Fetching)В App Router серверные компоненты могут быть асинхронными. Это значит, что fetch можно выполнять непосредственно в компоненте — без useEffect, без useState, без…Fetch в серверных компонентахКэшированиеПараллельный fetchORMData Access Layer
  6. 6Работа с формами и Server ActionsServer Action — это асинхронная функция, помеченная директивой "use server". Она всегда выполняется на сервере, даже если вызывается из клиентского компонента…Server ActionsuseActionStateuseFormStatusZodОбработка ошибокredirectrevalidatePath
  7. 7Аутентификация и авторизацияАутентификация — это процесс проверки личности пользователя. Авторизация — проверка прав доступа. В Next.js есть несколько подходов к аутентификации:СессииJWTCookiesNextAuth.js (Auth.js)MiddlewareRBAC
  8. 8API Routes и Route HandlersRoute Handlers — это серверные функции, которые обрабатывают HTTP-запросы. Они создаются в файлах route.ts внутри папки app/. Это аналог API Routes из Pages Router.route.tsGET/POST/PUT/DELETERequest/ResponseСтримингВебхукиЗагрузка файлов
  9. 9Базы данных и ORMORM (Object-Relational Mapping) — библиотека, позволяющая работать с базой данных через объекты и методы вместо SQL-запросов.PrismaDrizzleМиграцииConnection PoolingСидированиеТранзакции
  10. 10Состояние и управление даннымиВ Next.js App Router управление состоянием устроено иначе, чем в классическом React SPA…React ContextZustandURL как состояниеСерверный vs клиентский стейт
  11. 11Оптимизация и производительностьNext.js поддерживает несколько стратегий рендеринга. Выбор стратегии влияет на скорость загрузки, SEO и свежесть данных.SSG vs SSR vs ISRgenerateStaticParamsCache ComponentsКэшированиеLazy loadingАнализ бандла
  12. 12ТестированиеВ здоровом приложении тесты образуют «пирамиду»: внизу много быстрых unit-тестов, в середине меньше компонентных, наверху мало E2E. Цифры примерные:VitestReact Testing LibraryPlaywrightТестирование Server Actions
  13. 13Деплой и инфраструктураПеред деплоем убедитесь, что проект собирается без ошибок и все тесты проходят.VercelDockerПеременные окруженияCI/CDМониторинг
  14. 14Продвинутые паттерныИнтернационализация позволяет создавать многоязычные приложения. В App Router рекомендуется подход с сегментом [lang] в URL.Интернационализация (i18n)Multi-tenancyEdge RuntimeAI Streaming

Частые вопросы о курсе

Что входит в курс Next.js?
14 модулей, 132 ак. часа, 144 раздела теории. Каждый модуль — полноценное занятие: теория с разбором «почему», листинги с кнопкой копирования, практика и домашнее задание.
Что открыто бесплатно?
Первые 2 модуля курса открыты всем без регистрации: можно прочитать теорию, повторить листинги и сделать практику, прежде чем решать о покупке.
Сколько стоит доступ и надолго ли он?
2 100 ₽ за весь курс. Оплата разовая, без подписки; доступ ко всем модулям остаётся навсегда и включает будущие обновления курса.
Что нужно знать заранее?
React и основы JavaScript, базовый TypeScript.

Другие курсы

← Ко всем курсам

Введите запрос: название модуля, тема или раздел.

Стрелки — выбор, Enter — открыть. Ищет по названиям модулей, темам и разделам.