Паралельні маршрути та перехоплення маршрутів у Next.js

Що таке Паралельні Маршрути?

Паралельні маршрути дозволяють вам відображати кілька сторінок одночасно в одному макеті. Вони визначаються за допомогою іменованих слотів з конвенцією @folder.

Основний Синтаксис

app/
  layout.tsx
  page.tsx
  @sidebar/
    page.tsx
  @feed/
    page.tsx

tsx

// app/layout.tsx — отримує паралельні маршрути як пропси
export default function Layout({
  children,
  sidebar,
  feed,
}: {
  children: React.ReactNode;
  sidebar: React.ReactNode;
  feed: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-[250px_1fr]">
      <aside>{sidebar}</aside>
      <main>
        {children}
        {feed}
      </main>
    </div>
  );
}

Варіанти Використання

1. Панель приладів з незалежними панелями

app/dashboard/
  layout.tsx
  page.tsx              → основний контент
  @stats/
    page.tsx            → панель статистики
    loading.tsx         → незалежний стан завантаження
  @notifications/
    page.tsx            → панель сповіщень
    error.tsx           → незалежна межа помилок

Кожен слот може мати свої власні стани завантаження та помилок:

tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  stats,
  notifications,
}: {
  children: React.ReactNode;
  stats: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div>
      <div className="main">{children}</div>
      <div className="sidebar">
        {stats}
        {notifications}
      </div>
    </div>
  );
}

2. Умовне Відображення (Аутентифікація)

tsx

// app/layout.tsx
import { getUser } from "@/lib/auth";

export default async function Layout({
  children,
  dashboard,
  login,
}: {
  children: React.ReactNode;
  dashboard: React.ReactNode;
  login: React.ReactNode;
}) {
  const user = await getUser();
  return user ? dashboard : login;
}

Що таке Перехоплюючі Маршрути?

Перехоплюючі маршрути дозволяють завантажити маршрут в межах поточного макету, показуючи при цьому іншу URL-адресу. Загальний шаблон: натискання на фото відкриває модальне вікно, але пряма навігація показує повну сторінку.

Конвенція

(.)route   — перехоплює на тому ж рівні
(..)route  — перехоплює на один рівень вище
(..)(..)route — перехоплює на два рівні вище
(...)route — перехоплює з кореня

Приклад Модального Вікна Фото

app/
  feed/
    page.tsx                    → /feed (показує сітку фото)
    @modal/
      (.)photo/[id]/
        page.tsx                → Перехоплено: відкриває модальне вікно
      default.tsx               → null (без модального вікна за замовчуванням)
  photo/
    [id]/
      page.tsx                  → /photo/123 (повна сторінка, пряма навігація)

tsx

// app/feed/@modal/(.)photo/[id]/page.tsx
// При навігації з /feed, це перехоплює і показує модальне вікно
export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);

  return (
    <Modal>
      <img src={photo.url} alt={photo.title} />
    </Modal>
  );
}

// app/photo/[id]/page.tsx
// Пряма навігація (/photo/123) показує повну сторінку
export default async function PhotoPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);

  return (
    <div className="full-page">
      <img src={photo.url} alt={photo.title} />
      <PhotoDetails photo={photo} />
    </div>
  );
}

Підсумок Поведінки

Особливість	Паралельні Маршрути	Перехоплюючі Маршрути
Призначення	Відображати кілька сторінок в одному макеті	Показувати маршрут у поточному контексті (модальне вікно)
Конвенція	`@folder`	`(.)`, `(..)`, `(...)`
URL	Та ж URL-адреса, кілька переглядів	Змінює URL, але залишається в поточному макеті
Варіант використання	Панелі приладів, умовні макети	Модальні вікна, панелі попереднього перегляду

Важливо:

Паралельні маршрути дозволяють мультипанельні макети, де кожна панель може завантажуватися, мати помилки та навігувати незалежно. Перехоплюючі маршрути створюють досвід, схожий на модальні вікна (модальні вікна фото в стилі Instagram). Разом вони є потужними для складних інтерфейсів, які показують кілька частин контенту одночасно.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань