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

Kail · 12.05.2025

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