Урок 12

Итоги курса

Курс о роутинге и страницах в Next.js.

Что ты узнал

  • Файловый роутинг — папки в app/ — маршруты
  • Динамические маршруты — [id], [...slug], [[...slug]]
  • Search params — query-параметры
  • Навигация — Link, useRouter, usePathname
  • Вложенные layouts — иерархия обёрток
  • Loading и Error — специальные файлы
  • Параллельные маршруты — @slot
  • Перехватывающие — (.), (..), (...)
  • Route Groups — (name) без URL
  • Middleware — до рендера, Edge Runtime
  • Практика — типичная структура проекта

Ключевые идеи

Папки — маршруты. page.tsx делает сегмент доступным.

_folder — приватные. Не создают маршрут, удобно для колокации.

(group) — без URL. Разные layouts для секций.

Params и searchParams — промисы. await обязателен.

Layouts не перерисовываются. Быстрые переходы.

loading.tsx и error.tsx — автоматические. Не нужно вручную оборачивать.

Middleware — Edge Runtime. Быстро, но без Node.js API.

Частые ошибки

  • Забыть await для params или searchParams
  • Дублировать URL в разных группах
  • Импортировать useRouter в серверном компоненте
  • Использовать браузерные API в middleware
  • Забыть default.tsx для параллельных слотов
  • Не проверять права в API и Actions
  • Использовать searchParams там, где нужна статика
  • Путать redirect и router.push

Что дальше

  • Server Components глубоко — стриминг, Suspense
  • Server Actions — мутации
  • Оптимизация — Image, Font, метаданные
  • Prisma или Drizzle — ORM
  • Auth.js — аутентификация
  • Vercel — деплой

Полезные ссылки

  • Next.js Routing: nextjs.org/docs/app/building-your-application/routing
  • Dynamic Routes: nextjs.org/docs/app/building-your-application/routing/dynamic-routes
  • Route Groups: nextjs.org/docs/app/building-your-application/routing/route-groups
  • Parallel Routes: nextjs.org/docs/app/building-your-application/routing/parallel-routes

Заключение

Роутинг в Next.js — это структура проекта. Папки, layouts, страницы — всё в файловой системе. Понимание групп, динамических сегментов и layouts отличает структурированный проект от хаоса. Правила: _folder для колокации, (group) для layouts, всегда проверяй права, не забывай про await.