Курс по разработке на Next.js [learn.javascript.ru] [Андрей Зубков]

На этом курсе мы изучим 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 Специальные компоненты для оптимизации работы приложения. Преподаватель: Андрей Зубков. Более 10 лет занимаюсь программированием, преимущественно frontend-разработкой около 5 лет. Сейчас разработчик интерфейсов в Кинопоиске – стриминговом сервисе с еженедельной аудиторией в 8M пользователей. Наш основной стек – React, Next, GraphQL, TypeScript. Также являюсь лектором и ментором в Яндексе.