На этом курсе мы изучим Next.js — современный фреймворк на базе React, который с помощью нового App Router помогает разработчику решать комплексные задачи при создании веб-приложений. Мы разберем базовый функционал и погрузимся в продвинутые аспекты использования фреймворка в production-сценариях. Писать код будем на TypeScript, который можно изучить заранее или в процессе по мере курса.
Мы изучим все основные аспекты разработки - роутинг, авторизацию и аутентификацию, работу с данными, организация различных видов рендеринга и другие. Для их решения приходится использовать сторонние библиотеки или создавать собственные решения.
Мы научимся писать изоморфный код (работающий как на сервере, так и на клиенте), а также изучим встроенные в Next.js оптимизации.
Дополнительно познакомимся со сложной иерархией кеширования в Next.js и настройкой метаданных. Также мы с вами изучим новое API React v19, которое активно применяется в Next.js.
В результате мы создадим современное веб-приложение, соответствующее реальным требованиям к продукту в продакшене.
Чему вы научитесь?
Создавать серверные и клиентские компоненты в Next.js
Работать с данными и кэшированием в новом App Router
Реализовывать аутентификацию и авторизацию
Писать изоморфный код, работающий на клиенте и сервере
Настраивать SEO-метаданные и генерировать og-разметку
Использовать встроенные механизмы оптимизации Next.js
Работать с новым API React 19
Предварительные требования
Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
Знание современного JavaScript (будет плюсом знание TypeScript).
Базовое знание React.
Интернет 256kb/s или быстрее для видео.
Программа может быть дополнительно адаптирована под темп обучения и вопросы группы.
Блок 1
Знакомство с Next.js
Зачем нужен фреймворк?
Создание приложения и первый запуск.
Как устроен роутинг и навигация в Next.js.
Отличие клиентских и серверных компонентов React.
Что такое гидрация и зачем нужен RSC payload.
Блок 2
Работа с данными
Загрузка данных в серверных компонентах.
Стриминговый рендеринг.
Использование React Suspense.
Управление кешом, его равалидация и виды рендеринга.
Индикатор загрузки и навигации при клиентских переходах.
Блок 3
Пользовательские данные
Аутентификация и авторизация: в чем разница.
Stateful и stateless состояния.
Виды аутентификации.
Работа с пользовательскими данными.
Разграничение доступа по ролям пользователя.
React Server Functions.
Постепенное обновление с useActionState, useTransition.
Middleware в Next.js
Блок 4
Продвинутая работа с данными
Как работать с данными на клиенте?
Реализация Optimistic UI.
Отличие динамического импорта (lazy/dynamic).
Блок 5
Метаданные
Работа с метаданными на сервере.
Корректная установка статусов ответа сервера.
OG-разметка и генерация картинок.
Блок 6
Оптимизации
Встроенные оптимизации в Next.js
Специальные компоненты для оптимизации работы приложения.