NextJS Практический курс - Делаем клон YouTube с нуля
О чём курс
О чём курс
Роман Максимов разбирает разработку клона YouTube на фреймворке Next.js от настройки структуры проекта до развертывания готового веб-сервиса на хостинге. Обучение построено вокруг сквозного практического проекта, на примере которого демонстрируются возможности современного стека: архитектура App Router, разделение на серверные и клиентские компоненты, обработка данных и взаимодействие с базой данных.
По ходу работы вы создаете интерфейс видеохостинга, настраиваете навигацию, верстаете страницы сервиса и подключаете воспроизведение видео. Автор объясняет принципы серверного рендеринга (SSR), механизмы управления состояниями загрузки через Suspense и loading-файлы, а также обработку ошибок с помощью специальных error-компонентов.
Что внутри
- Маршрутизация в Next.js: динамические, вложенные, групповые и параллельные роуты.
- Серверная логика: серверные экшены (Server Actions) и Route Handlers для построения API.
- Формы и валидация пользовательских данных с помощью библиотек react-hook-form и zod.
- Система авторизации и регистрации на базе JWT-токенов, cookies и хеширования паролей через bcrypt.
- Подключение базы данных и серверный рендеринг страниц с динамическими параметрами.
- Поисковая оптимизация: метаданные, Open Graph разметка, файл robots.txt и генерация OG-изображений.
- Оптимизация производительности: кэширование запросов и страниц, ленивая загрузка изображений, динамические импорты.
- Подготовка продакшен-сборки и развертывание приложения на платформе Vercel.
Формат занятий
Уроки записаны на видео и распределены по тематическим блокам. В каждом блоке разбирается отдельная механика фреймворка, которая сразу внедряется в разрабатываемый сайт.
Часть задач автор предлагает сначала решить самостоятельно: написать код по заданным условиям, а затем сверить полученный результат с видеоразбором. В уроки также включены вопросы для закрепления материала и архивы с исходным кодом каждого этапа.
Для кого
Материал рассчитан на фронтенд-разработчиков, планирующих освоить современный стек Next.js на практических примерах. Для комфортного прохождения понадобятся уверенные навыки работы с HTML, CSS и базовым JavaScript, а также начальное понимание основ React. Глубоких знаний TypeScript не требуется: в проекте он задействован в минимальном объеме.
Об авторе
Роман Максимов — старший фронтенд-разработчик с опытом в веб-разработке более 8 лет. Работал в небольших командах и крупных ИТ-компаниях.
Программа обучения
- База NextJS: Введение Как будет устроена верстка Устанавливаем Next Немного о себе Роутинг Формируем структуру проекта Делаем шапку (узнаем про модульный css) Страница 404 (Компонент Image) Навигация (Компонент Link) Metadata Добавляем видео на сайт (embed) Обрабатываем формы: react-hook-form + zod Refine и superRefine из zod API роуты Запрос за данными к Next api Рисуем превью для видосов Обрабатываем страницу отдельного видео Исходники
- Верстка: Верстка шапки Верстка левой меню Верстка страницы 404 Верстка превью видео Верстка layout Верстка страницы отдельного видео Верстка формы загрузки Исходники
- Погружаемся в особенности NextJS: Введение Что было во 2 модуле (для тех, кто пропустил) Достаем больше информации о видосах Исходники Достаем информацию по 1 видео Как делать серверный рендеринг Загрузка (Suspence, файл loading.tsx) Серверный рендеринг для 1 видео Особенности работы с .env в next Обновляем NextJS + рефакторинг Добавляем категории к видео Страница "Видео по категориям" Группировка роутов NextJS Приватные папки NextJS Метаданные и их динамическая генерация Функция notFound в NextJS Страница "Ваши видео" Немного рефакторинга + верстка Что дальше?
- Авторизация: Исходники Введение Верстаем страницы авторизации/регистрации хук useRouter bcrypt Авторизация Куки + jsonwebtoken HOC для получения авторизованного пользователя Регистрация Выход из аккаунта (log out) Безопасность авторизационного токена Небольшой рефакторинг Верстка
- Хостинг: Введение Исходники Заливаем код на github Регистрируемся на vercel Избавляемся от api роутов Серверные экшены Подключаем БД
- Добиваем страницы: Обновляемся на NextJS 16 Разделяем пользователей Страница автора Исходники Файл error.tsx transitionType NextJS 16.2 Флаг --inspect Файл global-error.tsx Верстка
- SEO: Введение Тоннель для тестов Подключаем favicon OG разметка robots файл Исходники meta noindex opengraph image
- Оптимизации: Процесс... proxy.ts (middleware.ts) Чуть больше про редиректы Введение Оптимизация картинок (loading lazy, optimization, decoding) Динамические импорты Как уменьшать use client Параллельные запросы Кэширование запросов Кэширование целой страницы Исходники
- Параллельные роуты: Введение Создаем параллельный роут В чем идея этих роутов? Исходники
- Итоги: О чем-то рассказываю
Теги курса
Другие материалы автора 2
РМ Роман Максимов Все материалыОтзывов пока нет. Будьте первым!
Этот курс сейчас в процессе организации складчины. Нажмите кнопку «Записаться» и ожидайте старта — вам придёт уведомление. Когда складчина стартует, в карточке курса будет указан актуальный взнос. Текущая цена пока в процессе формирования и может отличаться от финальной.
Да, мы стремимся, чтобы финальный взнос был не больше ≈10% от оригинальной цены курса. Чем больше участников записывается в складчину, тем ниже выходит взнос для каждого.
Нажмите кнопку «Записаться» и авторизуйтесь на сайте через email (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.