На чем основывается маршрутизация в Next.js

Маршрутизация в Next.js: архитектура и основные принципы

Маршрутизация в Next.js основана на файловой системе (file-system based routing), что является фундаментальным отличием от других React-фреймворков. Эта концепция предполагает, что структура файлов и папок внутри директорий pages (в версиях до 13) или app (в App Router, начиная с версии 13) напрямую определяет маршруты в приложении.

Основополагающие концепции

1. Файловая система как API маршрутизации

Каждый файл внутри соответствующих директорий автоматически становится маршрутом. Например:

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

// pages/about.js
export default function AboutPage() {
  return <h1>Страница "О нас"</h1>;
}

2. Динамическая маршрутизация

Next.js поддерживает динамические сегменты путей через специальный синтаксис именования файлов:

• [param].js — один динамический сегмент
• [...slug].js — catch-all маршрут (захват всех сегментов)
• [[...slug]].js — опциональный catch-all маршрут

// pages/products/[id].js
import { useRouter } from 'next/router';

export default function ProductPage() {
  const router = useRouter();
  const { id } = router.query;
  
  return <div>Товар с ID: {id}</div>;
}

3. Вложенные маршруты через вложенные директории

Структура папок создает вложенные маршруты:

• pages/blog/first-post.js → /blog/first-post
• pages/dashboard/settings/profile.js → /dashboard/settings/profile

Ключевые компоненты маршрутизации

Компонент <Link> для клиентской навигации

Этот компонент обеспечивает навигацию без полной перезагрузки страницы (client-side navigation):

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Главная</Link>
      <Link href="/about">О нас</Link>
      <Link href="/products/[id]" as="/products/123">
        Товар 123
      </Link>
    </nav>
  );
}

Хук useRouter() для программной навигации

Позволяет управлять маршрутизацией программно:

import { useRouter } from 'next/router';

function LoginButton() {
  const router = useRouter();
  
  const handleLogin = () => {
    // После успешного входа
    router.push('/dashboard');
  };
  
  return <button onClick={handleLogin}>Войти</button>;
}

App Router (Next.js 13+): эволюция маршрутизации

С версии 13 Next.js представил App Router — новую модель маршрутизации, основанную на React Server Components и предоставляющую дополнительные возможности:

1. Файловая структура в директории app

• app/page.js — главная страница
• app/about/page.js — страница /about
• app/blog/[slug]/page.js — динамический маршрут

2. Специальные файлы для макета и загрузки

• layout.js — общий макет для группы маршрутов
• loading.js — UI для состояния загрузки
• error.js — обработка ошибок
• not-found.js — страница 404

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return (
    <div className="blog-container">
      <h1>Блог компании</h1>
      {children}
    </div>
  );
}

3. Параллельные и перехватывающие маршруты

App Router вводит продвинутые паттерны:

• Параллельные маршруты — одновременное отображение нескольких страниц
• Перехватывающие маршруты — модальные окна, которые "перехватывают" навигацию

Преимущества файловой маршрутизации Next.js

1. Интуитивность — структура проекта напрямую отражает структуру URL
2. Минимальная конфигурация — не требуется ручное определение маршрутов
3. Автоматическое разделение кода — каждый маршрут автоматически код-сплитится
4. SEO-дружественность — совмещение статической генерации и SSR
5. Гибкость — поддержка статических, динамических и гибридных маршрутов

Гибридный рендеринг

Next.js позволяет комбинировать различные стратегии рендеринга для разных маршрутов:

• Статическая генерация (SSG) через getStaticProps/getStaticPaths
• Серверный рендеринг (SSR) через getServerSideProps
• Клиентский рендеринг (CSR) для динамического контента
• Инкрементальная статическая регенерация (ISR) для обновления статического контента

Маршрутизация Next.js продолжает развиваться, сохраняя баланс между простотой использования для новичков и мощными возможностями для сложных enterprise-приложений, что делает её одним из самых популярных решений для современной веб-разработки на React.