[Stepik] NextJS Практический курс 2026 - Делаем клон YouTube с нуля (Роман Максимов)

​

Чему вы научитесь

• Понимать, как работает Next.js (App Router, серверные и клиентские компоненты)
• Уверенно ориентироваться в документации Next.js и применять её на практике
• Работать с роутингом (динамические, вложенные и параллельные роуты)
• Строить архитектуру реального проекта на Next.js
• Работать с API в Next.js (Route Handlers, Server Actions)
• Обрабатывать формы с помощью react-hook-form и zod
• Реализовывать простую авторизацию (JWT, cookies, bcrypt)
• Работать с серверным рендерингом (SSR) и оптимизацией
• Управлять состоянием загрузки (loading, suspense)
• Подключать и использовать базу данных
• Делать SEO-оптимизацию (metadata, OG, robots.txt)
• Оптимизировать приложение (кэширование, lazy loading, dynamic import)
• Разворачивать проект (Vercel + production setup)
• Создавать проект уровня “YouTube clone” для портфолио

Спойлер: Программа:

1. База NextJS:

1. Введение
2. Как будет устроена верстка
3. Устанавливаем Next
4. Немного о себе
5. Роутинг
6. Формируем структуру проекта
7. Делаем шапку (узнаем про модульный css)
8. Страница 404 (Компонент Image)
9. Навигация (Компонент Link)
10. Metadata
11. Добавляем видео на сайт (embed)
12. Обрабатываем формы: react-hook-form + zod
13. Refine и superRefine из zod
14. API роуты
15. Запрос за данными к Next api
16. Рисуем превью для видосов
17. Обрабатываем страницу отдельного видео
18. Исходники

2. Верстка:

1. Верстка шапки
2. Верстка левой меню
3. Верстка страницы 404
4. Верстка превью видео
5. Верстка layout
6. Верстка страницы отдельного видео
7. Верстка формы загрузки
8. Исходники

3. Погружаемся в особенности NextJS:

1. Введение
2. Что было во 2 модуле (для тех, кто пропустил)
3. Достаем больше информации о видосах
4. Исходники
5. Достаем информацию по 1 видео
6. Как делать серверный рендеринг
7. Загрузка (Suspence, файл loading.tsx)
8. Серверный рендеринг для 1 видео
9. Особенности работы с .env в next
10. Обновляем NextJS + рефакторинг
11. Добавляем категории к видео
12. Страница "Видео по категориям"
13. Группировка роутов NextJS
14. Приватные папки NextJS
15. Метаданные и их динамическая генерация
16. Функция notFound в NextJS
17. Страница "Ваши видео"
18. Немного рефакторинга + верстка
19. Что дальше?

4. Авторизация:

1. Исходники
2. Введение
3. Верстаем страницы авторизации/регистрации
4. хук useRouter
5. bcrypt
6. Авторизация
7. Куки + jsonwebtoken
8. HOC для получения авторизованного пользователя
9. Регистрация
10. Выход из аккаунта (log out)
11. Безопасность авторизационного токена
12. Небольшой рефакторинг
13. Верстка

5. Хостинг:

1. Введение
2. Исходники
3. Заливаем код на github
4. Регистрируемся на vercel
5. Избавляемся от api роутов
6. Серверные экшены
7. Подключаем БД

6. Добиваем страницы:

1. Обновляемся на NextJS 16
2. Разделяем пользователей
3. Страница автора
4. Исходники
5. Файл error.tsx
6. transitionType
7. NextJS 16.2
8. Флаг --inspect
9. Файл global-error.tsx
10. Верстка

7. SEO:

1. Введение
2. Тоннель для тестов
3. Подключаем favicon
4. OG разметка
5. robots файл
6. Исходники
7. meta noindex
8. opengraph image

8. Оптимизации:

1. Процесс...
2. proxy.ts (middleware.ts)
3. Чуть больше про редиректы
4. Введение
5. Оптимизация картинок (loading lazy, optimization, decoding)
6. Динамические импорты
7. Как уменьшать use client
8. Параллельные запросы
9. Кэширование запросов
10. Кэширование целой страницы
11. Исходники

9. Параллельные роуты:

1. Введение
2. Создаем параллельный роут
3. В чем идея этих роутов?
4. Исходники

10. Итоги:

1. О чем-то рассказываю

Роман Максимов

• Senior Frontend Developer
• Уже больше 8 лет пишу код
• Работал как в маленьких, так и крупных компаниях