NextJS Практический курс - Делаем клон YouTube с нуля

4 участника

О чём курс

Этот курс представляет собой интенсивную практическую программу, направленную на освоение современного стека 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, понимая внутренние механизмы работы фреймворка и современные стандарты индустрии.

Программа обучения

  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. Итоги: О чем-то рассказываю
Складчина создана 6 сентября 2026 г. · описание обновлено 7 сентября 2026 г.

Теги курса

Профессии

Другие материалы автора 2

РМ Роман Максимов Все материалы
571 ₽ 990 ₽