Курс по разработке на Next.js

Освойте современную разработку на Next.js с использованием нового App Router и React 19. Научитесь создавать масштабируемые веб-приложения, которые отвечают требования реального продакшена.

О курсе

На этом курсе мы изучим 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

Как организовано обучение?

Курс идёт 3 недели.

До начала обучения: вводные материалы

Мы будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Каждое занятие идёт примерно 1.5 часа.

Домашние задания, обратная связь по ним

Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных приёмов проектирования, даёт обратную связь.

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

На этом курсе мы делаем курсовой проект: интернет магазин товаров для тенниса. Код для проекта вы напишете сами.

Результат

Вы понимаете и умеете использовать разные виды рендеринга, создавать клиентские и серверные компоненты.

Вы освоили продвинутые техники React.

Вы умеете строить современные production приложения на Next.js.

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.

Программа курса

Программа может быть дополнительно адаптирована под темп обучения и вопросы группы.

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

Предварительные требования

Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
Знание современного JavaScript (будет плюсом знание TypeScript).
Базовое знание React.
Интернет 256kb/s или быстрее для видео.

Преподаватель

Андрей Зубков

Более 10 лет занимаюсь программированием, преимущественно frontend-разработкой около 5 лет.

Сейчас разработчик интерфейсов в Кинопоиске – стриминговом сервисе с еженедельной аудиторией в 8M пользователей. Наш основной стек – React, Next, GraphQL, TypeScript. Также являюсь лектором и ментором в Яндексе.

Гарантия

Если объяснения будут вам непонятны
Если курсы не дадут вам новых знаний и умений
Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.

При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
Для зарубежных компаний выдаём инвойс на английском языке.

Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.

Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.