Next.js III: SEO, i18n 2026

SEO, i18n, App Router и Supabase в Next.js. Server-rendered search, metadata, canonical, hreflang, sitemap, robots, Ticketmaster API, Suspense, modal routes, cloud favorites, Vitest, Playwright, CI и деплой на Vercel. Соберём приложение для поиска событий с живыми данными, SEO-архитектурой и публичным прод-деплоем.

Чему вы научитесь

  • Строить SEO-страницы на Next.js App Router: generateMetadata, canonical, hreflang, Open Graph, Twitter cards, sitemap и robots.
  • Делать server-rendered search, где URL становится источником правды для категории, города, query и pagination.
  • Подключать внешний API через server boundary: Ticketmaster live source, controlled fallback, Zod-проверка и нормализация данных.
  • Настраивать i18n через локализованные маршруты /en и /ru, сохраняя SEO, links, metadata и search.
  • Использовать продвинутые паттерны App Router: parallel routes, intercepting routes, modal поверх списка, full page detail по прямой ссылке.
  • Применять Suspense и streaming в реальном проекте: hero сразу, featured events позже, search results и similar events через границы загрузки.
  • Развивать избранное от localStorage до Supabase cloud favorites: Auth, RLS, guest/user режимы и миграция локальных данных в облако.
  • Добавлять минимальный тестовый контур: Vitest для pure helpers, Playwright smoke tests для ключевых маршрутов, GitHub Actions CI.
  • Деплоить Next.js проект на Vercel: env variables, Supabase redirects, Google OAuth, robots, sitemap и smoke check по публичной ссылке.

О курсе

Курс продолжает линию Next.js I: JavaScript 2026 и Next.js II: TypeScript 2026. Если первые два курса дают базу App Router, TypeScript, формы, Server Actions и архитектурную дисциплину, то Next.js III показывает следующий слой - как собрать публичный продуктовый каркас с SEO, i18n, внешними данными, авторизацией, тестами и деплоем.

Курсовой проект EventMap - агрегатор событий: главная, поиск, категории, страницы деталей, избранное, авторизация, Demo Lab и публичный деплой. Основные паттерны встроены в сам EventMap, а Demo Lab с набором учебных примеров используется для изолированного объяснения механик.

Главная идея курса - системная сборка продукта. Маршруты работают как SEO-входы, внешние данные проходят через контролируемые server/source boundaries, UI отделён от учебных лабораторий, а browser state развивается от localStorage до account-based cloud favorites.

Специфика курса

SEO как система: metadata helpers, canonical, hreflang, sitemap, robots, индексация и noindex для слабых страниц.

i18n как локализованная маршрутная структура с /en и /ru, links, metadata и search.

Внешние данные через Zod, normalisation, fallback и server boundary.

Разделение Product EventMap и Demo Lab, реальные сценарии живут в продукте, учебные разборы живут в /demo.

Supabase используется как managed backend: Auth, Magic Link, Google OAuth, RLS и cloud favorites.

Курс доходит до публичного URL на Vercel, тестов и CI.

Для кого этот курс

Знаете основы React и Next.js App Router, но хотите понять, как строить SEO-ready проект. Имеете базовый уровень: маршруты, layout, server/client компоненты, fetch, metadata, деплой. Хотите разобраться с SEO в Next.js через рабочую архитектуру. Увидеть i18n, sitemap, robots, canonical, hreflang и metadata в одном проекте. Подключить внешний API и не дать ему сломать UI. Понять Supabase Auth, RLS и cloud state на понятном учебном примере. Ищете архитектурный reference project для собственных лендингов, каталогов, поисковых страниц или продуктовых MVP.

Начальные требования

Node.js, npm, VS Code или другой редактор.

Уверенное знание JavaScript и базовое знание TypeScript.

Опыт работы с React: компоненты, props, hooks.

Понимание основ Next.js App Router: app, layout, page, server/client components.

Начальный опыт работы с Git и GitHub.

Аккаунты Ticketmaster Developer, Supabase, GitHub и Vercel понадобятся в ходе курса.

Для локальной работы с Ticketmaster API в некоторых регионах может понадобиться VPN.

Наши преподаватели

Аватар пользователя

Как проходит обучение

Каждый урок добавляет один законченный слой EventMap. Сначала разбирается идея паттерна, затем он встраивается в проект, после этого выполняется проверка в браузере, terminal или dashboard внешнего сервиса.

В курсе два типа практики. Product-паттерны встраиваются в основной EventMap: search, metadata, modal detail, streaming, favorites, Supabase Auth, cloud favorites. Учебные механики выносятся в Demo Lab, чтобы можно было увидеть паттерн отдельно и не превращать продуктовые страницы в отладочные экраны.

В финале проект проверяется через Vitest, Playwright, GitHub Actions и деплоится на Vercel. После деплоя выполняется smoke check по публичному URL.

Программа курса

загружаем...

Что вы получаете

  • Цельную модель Next.js App Router после базового уровня: маршруты, данные, SEO, i18n, server/client границы, внешние API, cloud state и деплой.
  • Готовый проект EventMap, который можно открыть по публичной ссылке и использовать как reference project.
  • Практические SEO-паттерны: generateMetadata, canonical, hreflang, sitemap, robots, Open Graph и Twitter cards.
  • Понимание server-rendered search: URL как источник правды, search landing pages, category pages, query и pagination.
  • Опыт работы с внешним API через безопасную архитектуру: Ticketmaster, Zod, normalisation, fallback и no-crash поведение.
  • Понимание Supabase на практике: project setup, publishable key, Auth, RLS, Magic Link, Google OAuth и cloud favorites.
  • Минимальный тестовый контур проекта: unit tests, smoke tests, CI перед деплоем.
  • Опыт деплоя на Vercel: GitHub import, env variables, production domain, Supabase redirects, sitemap, robots и smoke check.
  • Каркас мышления: как собрать Next.js приложение, которое можно развивать, проверять и показывать по публичной ссылке.
  • Сертификат
Price: Бесплатно

Расскажите о курсе друзьям

Price: Бесплатно