Как устроена система роутинга в Next.js?

Система роутинга в Next.js

Роутинг в Next.js — это файловая система маршрутизации, где структура папок pages или app напрямую определяет маршруты в приложении. Это один из ключевых преимуществ Next.js, сочетающий простоту конфигурации с мощными возможностями.

Два режима роутинга: Pages Router и App Router

Next.js предлагает две системы:

• Pages Router (традиционный, основан на папке pages) — использовался до версии 13.
• App Router (новый, основан на папке app) — введен в Next.js 13 с поддержкой React Server Components и более продвинутых паттернов.

Основные принципы файловой маршрутизации

Каждый файл внутри pages или app автоматически становится маршрутом:

• pages/index.js → маршрут /
• pages/about.js → маршрут /about
• pages/blog/[slug].js → динамический маршрут /blog/:slug
• pages/blog/[slug]/edit.js → /blog/:slug/edit

// Пример: pages/about.js (Pages Router)
export default function AboutPage() {
  return <h1>Страница About</h1>;
}

Типы маршрутов

Статические маршруты

Создаются из файлов с конкретными именованиями: about.js, contact.js.

Динамические маршруты

Используют квадратные скобки для параметров:

• [slug].js — один параметр.
• [category]/[slug].js — несколько параметров.

// Пример динамического маршрута: pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>Пост: {slug}</h1>;
}

Маршруты с перехватом (Catch-all routes)

[...slug].js — захватывают все последующие сегменты пути, например /docs/a/b/c.

Опциональные перехватывающие маршруты

[[...slug]].js — могут также отображать родительский маршрут без параметров.

Особенности App Router (Next.js 13+)

App Router представляет более сложную, но мощную структуру:

• Файлы с специальными назначениями: page.js, layout.js, loading.js, error.js, not-found.js.
• Группировка маршрутов: папки в круглых скобках (folder-name) не влияют на URL.
• Вложенные layouts: layouts автоматически применяются к дочерним маршрутам.
• Параллельные маршруты: возможность одновременно отображать несколько независимых страниц в одном URL.
• Условные маршруты: можно создавать интерфейсы, зависящие от состояния.

// Пример: app/blog/[slug]/page.js (App Router)
export default function BlogPage({ params }) {
  const { slug } = params;

  return (
    <div>
      <h1>Пост: {slug}</h1>
      <p>Содержимое поста...</p>
    </div>
  );
}

API маршруты

Next.js также позволяет создавать API endpoints через файлы в pages/api или app/api:

// Пример: pages/api/users.js
export default function handler(req, res) {
  res.status(200).json({ users: ['Alice', 'Bob'] });
}

Навигация и клиентский роутинг

Для перехода между страницами используется компонент Link:

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Главная</Link>
      <Link href="/about">О нас</Link>
      <Link href="/blog/nextjs-routing">Блог</Link>
    </nav>
  );
}

Основные хуки и методы

• useRouter() (Pages Router) и usePathname(), useSearchParams() (App Router) — для получения информации о маршруте.
• router.push() — для программной навигации.
• router.replace() — для замены текущего маршрута без добавления в историю.

// Пример использования useRouter
import { useRouter } from 'next/router';

function RedirectButton() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/dashboard');
  };

  return <button onClick={handleClick}>Перейти в дашборд</button>;
}

Преимущества системы роутинга Next.js

• Минимальная конфигурация: маршруты создаются автоматически.
• Гибкость: поддержка статических, динамических, групповых и перехватывающих маршрутов.
• Оптимизация: предзагрузка маршрутов через Link для повышения производительности.
• SEO-friendly: чистые URL без расширений файлов.
• Полная интеграция: сочетание страниц и API endpoints в одной структуре.

Система роутинга Next.js позволяет разработчикам быстро создавать сложные маршруты без необходимости управления отдельным файлом конфигурации, что значительно упрощает процесс разработки и поддержки приложений. Переход от Pages Router к App Router открывает новые возможности для создания более динамичных и эффективных веб-приложений с улучшенной производительностью и структурой.