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