Программа и содержание
Создай клон 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 лет пишу код
Работал как в маленьких, так и крупных компаниях