Создай клон 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:
- Введение
- Как будет устроена верстка
- Устанавливаем Next
- Немного о себе
- Роутинг
- Формируем структуру проекта
- Делаем шапку (узнаем про модульный css)
- Страница 404 (Компонент Image)
- Навигация (Компонент Link)
- Metadata
- Добавляем видео на сайт (embed)
- Обрабатываем формы: react-hook-form + zod
- Refine и superRefine из zod
- API роуты
- Запрос за данными к Next api
- Рисуем превью для видосов
- Обрабатываем страницу отдельного видео
- Исходники
2. Верстка:
- Верстка шапки
- Верстка левой меню
- Верстка страницы 404
- Верстка превью видео
- Верстка layout
- Верстка страницы отдельного видео
- Верстка формы загрузки
- Исходники
3. Погружаемся в особенности NextJS:
- Введение
- Что было во 2 модуле (для тех, кто пропустил)
- Достаем больше информации о видосах
- Исходники
- Достаем информацию по 1 видео
- Как делать серверный рендеринг
- Загрузка (Suspence, файл loading.tsx)
- Серверный рендеринг для 1 видео
- Особенности работы с .env в next
- Обновляем NextJS + рефакторинг
- Добавляем категории к видео
- Страница "Видео по категориям"
- Группировка роутов NextJS
- Приватные папки NextJS
- Метаданные и их динамическая генерация
- Функция notFound в NextJS
- Страница "Ваши видео"
- Немного рефакторинга + верстка
- Что дальше?
4. Авторизация:
- Исходники
- Введение
- Верстаем страницы авторизации/регистрации
- хук useRouter
- bcrypt
- Авторизация
- Куки + jsonwebtoken
- HOC для получения авторизованного пользователя
- Регистрация
- Выход из аккаунта (log out)
- Безопасность авторизационного токена
- Небольшой рефакторинг
- Верстка
5. Хостинг:
- Введение
- Исходники
- Заливаем код на github
- Регистрируемся на vercel
- Избавляемся от api роутов
- Серверные экшены
- Подключаем БД
6. Добиваем страницы:
- Обновляемся на NextJS 16
- Разделяем пользователей
- Страница автора
- Исходники
- Файл error.tsx
- transitionType
- NextJS 16.2
- Флаг --inspect
- Файл global-error.tsx
- Верстка
7. SEO:
- Введение
- Тоннель для тестов
- Подключаем favicon
- OG разметка
- robots файл
- Исходники
- meta noindex
- opengraph image
8. Оптимизации:
- Процесс...
- proxy.ts (middleware.ts)
- Чуть больше про редиректы
- Введение
- Оптимизация картинок (loading lazy, optimization, decoding)
- Динамические импорты
- Как уменьшать use client
- Параллельные запросы
- Кэширование запросов
- Кэширование целой страницы
- Исходники
9. Параллельные роуты:
- Введение
- Создаем параллельный роут
- В чем идея этих роутов?
- Исходники
10. Итоги:
- О чем-то рассказываю
Роман Максимов
- Senior Frontend Developer
- Уже больше 8 лет пишу код
- Работал как в маленьких, так и крупных компаниях
