Практический курс по 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
