Next.js 15 — с нуля, React TypeScript, Hooks, SSR и CSS Grid

• Преимущества NextJS
• Как устроен курс
• Обзор проекта
• Обзор курсов
• AI и тренажёры
• Как проходить обновлённый курс
• Работа на платформе
• Практика на проекте

• Установка софта
• Работа с nvm
• Настройки VSCode
• Рекомендуемый курс
• Рекомендуемый курс

• Дополнительный курс по TypeScript
• Вводное видео
• Компилятор TypeScript
• Базовые типы
• Interfaces and Types
• Литеральные типы
• Enums
• Tuple
• Generics
• JSX
• Тест — TypeScript
• Занятие TypeScript
• Домашнее задание AI
• Работа с gitflow

• Обзор модуля
• О новом router
• App Router — Развертка проекта
• Page Router — Развертка проекта
• App Router — Cтруктура проекта
• Page Router — Структура проекта
• Настройка eslint
• Настройка stylelint
• Отладка в VSCode
• React Dev Tools
• Тест — Старт проекта
• Домашнее задание — Старт проекта

• Жизненный цикл React
• App Router — Задание Meta
• Pages Router — Компонент head
• React Fragment
• App Router — Корневой документ
• Pages Router — Компонент Document
• Тест — Компоненты Head и Document
• Занятие — Компоненты Head и Document
• Домашнее задание — Компоненты Head и Document

• Обзор модуля
• Разбор интерфейса
• Свойства компонент
• Экспорт графики
• Тест — Figma для разработчика

• Шрифты и цвета
• Font
• Первый компонент
• Библиотека classnames
• Classnames
• HTMLProps
• Детали HTMLprops
• Работа с svg
• SVG Next 13
• Упражнение — Компонент p
• Компонент тэга
• Тест — Простые компоненты
• Занятие — Простые компоненты
• Домашнее задание — Простые компоненты

• App Router — Клиентские компоненты
• React Hooks
• useState
• useEffect
• Правила использования Hooks
• Архитектура компонента рейтинга
• Компонент рейтинга — 1
• Компонент рейтинга — 2
• Тест — Statefull компоненты
• Занятие — Statefull компоненты
• Домашнее задание — Statefull компоненты

• Что такое HOC?
• App Router — Работа с layout
• App Router — Группы роутов
• App Router — Template
• App Router — Структура проекта
• Pages Router — Layout
• Pages Router — Пишем HOC withLayout
• Тест — HOC компоненты
• Занятие — HOC компоненты
• Домашнее задание — HOC компоненты
• Важно — API для работы

• Обзор модуля
• Template и gap
• Justify и align
• Распределение ячеек
• Template-area
• Лучшие практики
• Вёрстка layout
• Упражнение — Вёрстка footer
• Тест — CSS Grid
• Занятие — CSS Grid
• Домашнее задание — CSS Grid

• Переменные окружения
• Как работает SSR?
• App Router — SSR в NextJS
• Pages Router — SSR в NextJS
• App Router — Получение данных
• App Router — Динамические страницы
• App Router — notFound
• App Router — generateStaticParams
• App Router — Ревалидация страниц
• Pages Router — Использование getStaticProps
• Pages Router — Использование getStaticPaths
• Тест — Server side rendering
• Занятие — Server side rendering
• Домашнее задание — Server side rendering

• useContext
• App Router — Работа с контекстом
• Пишем свой контекст
• Вёрстка меню
• Тест — Контекст
• Занятие — Контекст
• Домашнее задание — Контекст

• Обновление компонента Link
• Компонент Link
• App Router — Параллельные роуты
• App Router — Loading
• App Router — Error page
• useRouter
• Упражнение — Добавление страниц
• Структура роутинга
• Вёрстка Sidebar
• Тест — Роутинг
• Занятие — Роутинг
• Домашнее задание — Роутинг

• Компоненты страниц
• Вёрстка страницы продуктов — 1
• Regex отображения цены
• Упражнение — Доработка страницы
• Вёрстка страницы продуктов — 2
• Вставка HTML
• useReducer
• Компонент сортировки
• Reducer сортировки
• Тест — Страница продуктов
• Занятие — Страница продуктов
• Домашнее задание — Страница поста

• Компонент Input
• Упражнение — Компонент Textarea
• Компонент поиска
• Компонент продукта — планирование
• Компонент продукта — сетка
• Компонент продукта — стили
• Склонение слов
• Компонент Image
• Компонент продукта — адаптив
• Тест — Компонент продукта
• Домашнее задание — Список комментариев

• Компонент отзыва
• Форма отзыва
• useForm
• Работа с формами
• Проброс ref
• Обработка ошибок
• Упражнение — Обработка ошибок Rating
• Отправка запроса со страницы
• useRef
• Упражнение — Исправление бага useReducer
• Занятие — Работа с формами
• Домашнее задание — Работа с формами

• Вводное видео
• Принципы анимации
• Анимация меню
• Анимация сортировки
• Пишем свой hook
• useAnimation
• Упражнение — Анимация отзывов
• Динамическая иконка
• Мобильное меню
• Жесты и MotionValues
• Производительность
• Занятие — Анимация на Framer Motion
• Домашнее задание — Анимация на Framer Motion

• Виды доступности
• Цветовая доступность
• Доступность меню с клавиатуры
• Доступность форм с клавиатуры
• Упражнение — доступность сортировки
• ARIA атрибуты
• Использование Screen Reader
• Aria-label и aria-labelledby
• Aria-hidden
• Добавление landmarks
• Доступность форм
• Упражнение — Доступность оповещений
• Доступность меню и списка
• Уменьшение движения
• Занятие — Доступность
• Домашнее задание — Доступность

• Script
• App Router — Расчёт meta
• Page Router — Добавление meta на страницу
• Установка метрики
• Husky
• Next export
• Страницы 404, 500
• Сборка контейнера Docker
• Запуск через docker-compose
• Github actions

• Финальное тестирование
• Собеседование с AI наставником
• Практика собеседования с AI

• Основы Scrum
• Старт задачи
• Выполнение задачи
• Код ревью
• Обзор проекта
• Старт командного проекта

Сертификат