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

[Пёсика]

На этом курсе мы изучим 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
• Специальные компоненты для оптимизации работы приложения.

Показать больше