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

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

Создай клон YouTube с нуля на Next.js! Практический курс без лишней теории: только реальный проект, в котором ты освоишь роутинг, серверные функции, метаданные и многое другое. Уже после прохождения у тебя будет готовый проект, залитый на хостинг и его можно будет показать на собеседовании.

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

• Понимать, как работает 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" для портфолио

Это практический курс по Next.js, в котором вы с нуля создадите рабочее веб-приложение в формате клона YouTube.
Цель курса - показать, как реально работать с Next.js: от базовых вещей вроде роутинга и структуры проекта до более продвинутых возможностей - API, авторизация, оптимизация и деплой.
Курс построен вокруг практики: вы не просто изучаете отдельные темы, а сразу применяете их в проекте.

Почему стоит выбрать этот курс:

• Практика вместо скучной теории
• Пошаговое объяснение без лишней воды
• Актуальный стек Next.js (App Router и современные подходы)
• Разбор реальных задач, с которыми сталкиваются в разработке

Особенности курса:

• Клон YouTube как основной проект
• Работа с формами и валидацией
• Авторизация (JWT, cookies)
• SEO и оптимизация
• Деплой на Vercel

В итоге у вас будет понятная картина работы Next.js и готовый проект для портфолио.

Для кого этот курс:

• Для разработчиков, которые хотят изучить современный подход к написанию frontend приложений

Начальные требования:

• HTML, CSS, JS
• Совсем немного React
• TypeScript тут будет, но в минимальном его проявлении, поэтому можно пройти курс без знания TS

Как проходит обучение:

• Курс представлен в виде видео, которое разбито на разные блоки
• В каждом блоке мы изучаем какую-то механику NextJS и пытаемся на ее основе сделать сайт
• Некоторые куски кода я сначала прошу реализовать вас, а только потом показываю как это делать. Чтобы вы могли тоже писать код, а не только повторять за мной
• Также будут секции с вопросами, чтобы вы могли закрепить материал

Программа:

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 лет пишу код
• Работал как в маленьких, так и крупных компаниях

Цена 990 руб.
Скрытая ссылка