NextJS Практический курс - Делаем клон YouTube с нуля
О чём курс
Этот курс представляет собой интенсивную практическую программу, направленную на освоение современного стека Next.js через создание полноценного веб-приложения — клона YouTube. Обучение построено по принципу «от практики к теории»: вместо бесконечного изучения документации вы сразу приступаете к разработке реального проекта, что позволяет закрепить полученные знания в контексте решения конкретных задач. Курс идеально подходит для разработчиков, которые уже владеют основами HTML, CSS, JavaScript и имеют базовое представление о React, но хотят научиться использовать современные возможности Next.js, такие как App Router, серверные компоненты и продвинутые методы оптимизации.
В процессе обучения вы пройдете полный цикл разработки: от настройки окружения и архитектуры проекта до деплоя готового приложения на Vercel. Вы научитесь работать с динамическим роутингом, серверными функциями (Server Actions), API Route Handlers, а также освоите современные подходы к управлению формами с помощью react-hook-form и zod. Особое внимание уделяется вопросам безопасности и авторизации: вы реализуете систему входа с использованием JWT, cookies и bcrypt, что даст понимание того, как защищать пользовательские данные в реальных приложениях.
Курс также глубоко погружает в темы производительности и SEO. Вы узнаете, как правильно использовать серверный рендеринг (SSR), настраивать метаданные, работать с OG-разметкой и файлами robots.txt для поисковой оптимизации. Важным аспектом программы является оптимизация приложения: вы научитесь кэшировать запросы, использовать динамические импорты, ленивую загрузку и правильно управлять состоянием загрузки через Suspense и loading.tsx. Вы поймете, как эффективно работать с базой данных и как архитектурно правильно выстраивать проект, чтобы он был масштабируемым и поддерживаемым.
Формат обучения включает видеоуроки, разбитые на логические блоки, где теория неразрывно связана с практикой. В некоторых разделах предусмотрены интерактивные задания, где вам предлагается самостоятельно реализовать функционал до того, как будет показано решение, что способствует лучшему усвоению материала. На выходе у вас будет не просто набор знаний, а готовый проект уровня «YouTube clone», который можно смело добавить в портфолио для демонстрации навыков на собеседованиях. Этот курс — ваш шанс перейти от теории к уверенной разработке на Next.js, понимая внутренние механизмы работы фреймворка и современные стандарты индустрии.
Программа обучения
- База 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 (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.