Программа и содержание
Практический курс по Next.js, в котором последовательно разбирается современный подход к построению full-stack приложений и архитектуре App Router.
В этом курсе мы разберем Next.js и последовательно пройдем через устройство App Router, границу между сервером и клиентом, а также то, как передаются данные и формируется итоговый UI. Мы научимся строить маршрутизацию с вложенными layout\'ами, разберем поведение компонентов при навигации и научимся проектировать структуру приложения так, чтобы оно масштабировалось без хаоса.
Отдельно разберем рендеринг, streaming и работу с Suspense, чтобы контролировать загрузку данных и поведение интерфейса. Большой блок будет посвящен кешированию и работе с данными, где мы разберем разные уровни кеша, поведение fetch и способы управления актуальностью данных.
После этого перейдем к мутациям через Server Actions, научимся валидировать данные, работать с формами и строить отзывчивый интерфейс с оптимистичными обновлениями. Также мы затронем работу с базой данных в серверной среде, разберем подходы к архитектуре, real-time взаимодействие, middleware и базовые принципы безопасности на уровне приложения. В финале мы соберем полноценный full-stack проект - клон Letterboxd - с продуманной архитектурой и всеми ключевыми механиками, и задеплоим его на Vercel.
Программа:
Эволюция рендеринга
От MPA до RSC. Разбираем, почему старые подходы умирали на больших проектах и как мы пришли к текущей архитектуре.
Движок React
Fiber и Concurrent Mode. Изучаем внутренности React, которые сделали возможным стриминг и современную работу с компонентами.
Битва рантаймов
Node.js vs Edge. Разбираемся в V8 Isolates и смотрим, как Next.js выжимает максимум скорости, используя современные движки.
Магия сборки
SWC и Turbopack. Глубокий разбор инкрементальных вычислений и того, почему компиляция на Rust - это новый стандарт индустрии.
Безопасность (Deep Dive)
Уязвимости и патчи. Как не слить базу через Server Actions и защитить приложение от Cache Poisoning и SSRF.
Создание и разбор Next App
Разворачиваем проект и смотрим, что нас подсунул Next.js: структура файлов и первый запуск.
Анатомия RSC Payload
Разбираем маркеры :HL, I, D, $ и $L, чтобы понимать, как сервер общается с браузером.
Анатомия страницы
Разбираем, из каких кирпичиков строится интерфейс. Учимся создавать общие элементы для разных разделов и понимаем, как они соединяются между собой.
Состояние и переходы
Как ведут себя страницы при навигации. Управляем экранами загрузки и обработки ошибок, а также разбираем способы принудительного обновления контента.
Динамический роутинг
Работаем с переменными в ссылках. Учимся создавать сотни страниц по одному шаблону.
Группы маршрутов
Разбираем, как группировать файлы в папки так, чтобы это не влияло на итоговые ссылки.
Продвинутый UI
Parallel & Intercepting Routes. Реализация сложных интерфейсов: модалки и панели с сохранением URL и стейта при перезагрузке.
Механика навигации
Разбираемся, как приложение мгновенно открывает новые страницы. Изучаем механизмы умной предзагрузки данных, работу внутреннего кэша и управление поведением скролла.
Что получите:
Готовый код курса для скачивания
Курс также доступен на YouTube