Курс по разработке на Next.js
Освойте современную разработку на Next.js с использованием нового App Router и React 19. Научитесь создавать масштабируемые веб-приложения, которые отвечают требования реального продакшена.
О курсе
Фреймворк Next.js позволяет писать и Frontend и Backend, используя один и тот же современный фреймворк на базе React.
Он не только ускоряет разработку, но и делает удобным использование общего кода между клиентской и серверной частью, ведь они часто работают с одними и теми же данными.
На этом курсе мы не только изучим основной функционал, но и погрузимся в продвинутые аспекты использования фреймворка в production-сценариях. Писать код будем на TypeScript, который можно изучить заранее или в процессе по мере курса.
Мы разберём все основные задачи разработки - роутинг, авторизацию и аутентификацию, работу с данными, организацию различных видов рендеринга и т.п. Для их решения приходится использовать сторонние библиотеки или создавать собственные решения.
Мы также будем писать изоморфный код (работающий как на сервере, так и на клиенте) и также изучим встроенные в Next.js оптимизации.
Дополнительно познакомимся со сложной иерархией кеширования в Next.js и настройкой метаданных. Также мы с вами изучим новое API React v19, которое важно использовать при разработке на Next.js.
В результате мы создадим современное веб-приложение, соответствующее реальным требованиям к продукту в продакшене.
Чему вы научитесь?
- Создавать серверные и клиентские компоненты в Next.js
- Работать с данными и кэшированием в новом App Router
- Реализовывать аутентификацию и авторизацию
- Писать изоморфный код, работающий на клиенте и сервере
- Настраивать SEO-метаданные и генерировать og-разметку
- Использовать встроенные механизмы оптимизации Next.js
- Работать с новым API React 19
Как организовано обучение?
Курс идёт 3.5 недели.
До начала обучения: вводные материалы
Мы будем использовать систему 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.
- Использование SWR.
Блок 5
Метаданные
- Работа с метаданными на сервере.
- Корректная установка статусов ответа сервера.
- OG-разметка и генерация картинок.
Блок 6
Оптимизации
- Встроенные оптимизации в Next.js.
- Специальные компоненты для оптимизации работы приложения.
- Динамический импорт, lazy и dynamic.
Преподаватель
Более 10 лет занимаюсь программированием, преимущественно frontend-разработкой около 5 лет.
Сейчас разработчик интерфейсов в Кинопоиске – стриминговом сервисе с еженедельной аудиторией в 8M пользователей. Наш основной стек – React, Next, GraphQL, TypeScript. Также являюсь лектором и ментором в Яндексе.
Гарантия
- Если объяснения будут вам непонятны
- Если курсы не дадут вам новых знаний и умений
- Если вы не сможете подключиться к системе онлайн-обучения
…то вы сможете получить деньги назад.
Для этого достаточно не позже окончания первой недели курса написать, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.
Для компаний
У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.
- При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
- Для зарубежных компаний выдаём инвойс на английском языке.
Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.
Запись на курс
Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.
Комментарии
<code>, для нескольких строк кода — тег<pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)