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

[Капоне]

Складчина: Курс по разработке на 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. Также являюсь лектором и ментором в Яндексе.





СЛИВЫ КУРСОВ

Для просмотра скрытого содержимого вы должны зарегистрироваться