Полный курс по Next.js

Практический курс по Next.js, в котором последовательно разбирается современный подход к построению full-stack приложений и архитектуре App Router.

О курсе

В этом курсе мы разберем Next.js и последовательно пройдем через устройство App Router, границу между сервером и клиентом, а также то, как передаются данные и формируется итоговый UI. Мы научимся строить маршрутизацию с вложенными layout'ами, разберем поведение компонентов при навигации и научимся проектировать структуру приложения так, чтобы оно масштабировалось без хаоса. Отдельно разберем рендеринг, streaming и работу с Suspense, чтобы контролировать загрузку данных и поведение интерфейса. Большой блок будет посвящен кешированию и работе с данными, где мы разберем разные уровни кеша, поведение fetch и способы управления актуальностью данных. После этого перейдем к мутациям через Server Actions, научимся валидировать данные, работать с формами и строить отзывчивый интерфейс с оптимистичными обновлениями. Также мы затронем работу с базой данных в серверной среде, разберем подходы к архитектуре, real-time взаимодействие, middleware и базовые принципы безопасности на уровне приложения. В финале мы соберем полноценный full-stack проект - клон Letterboxd - с продуманной архитектурой и всеми ключевыми механиками, и задеплоим его на Vercel.

• 1

  Эволюция рендеринга

  От MPA до RSC. Разбираем, почему старые подходы умирали на больших проектах и как мы пришли к текущей архитектуре.

• 2

  Движок React

  Fiber и Concurrent Mode. Изучаем внутренности React, которые сделали возможным стриминг и современную работу с компонентами.

• 3

  Битва рантаймов

  Node.js vs Edge. Разбираемся в V8 Isolates и смотрим, как Next.js выжимает максимум скорости, используя современные движки.

• 4

  Магия сборки

  SWC и Turbopack. Глубокий разбор инкрементальных вычислений и того, почему компиляция на Rust - это новый стандарт индустрии.

• 5

  Безопасность (Deep Dive)

  Уязвимости и патчи. Как не слить базу через Server Actions и защитить приложение от Cache Poisoning и SSRF.

• 6

  Создание и разбор Next App

  Разворачиваем проект и смотрим, что нас подсунул Next.js: структура файлов и первый запуск.

• 7

  Анатомия RSC Payload

  Разбираем маркеры :HL, I, D, $ и $L, чтобы понимать, как сервер общается с браузером.

• 8

  Анатомия страницы

  Разбираем, из каких кирпичиков строится интерфейс. Учимся создавать общие элементы для разных разделов и понимаем, как они соединяются между собой.

• 9

  Состояние и переходы

  Как ведут себя страницы при навигации. Управляем экранами загрузки и обработки ошибок, а также разбираем способы принудительного обновления контента.

• 10

  Динамический роутинг

  Работаем с переменными в ссылках. Учимся создавать сотни страниц по одному шаблону.

• 11

  Группы маршрутов

  Разбираем, как группировать файлы в папки так, чтобы это не влияло на итоговые ссылки.

• 12

  Продвинутый UI

  Parallel & Intercepting Routes. Реализация сложных интерфейсов: модалки и панели с сохранением URL и стейта при перезагрузке.

• 13

  Механика навигации

  Разбираемся, как приложение мгновенно открывает новые страницы. Изучаем механизмы умной предзагрузки данных, работу внутреннего кэша и управление поведением скролла.