Next.js: Перехоплення маршрутів — Повний посібник з реалізації (2025) Що таке перехоплений маршрут?

Перехоплення маршруту (Intercepting route) — це функція Next.js, яка дозволяє рендерити абсолютно новий маршрут на поточній сторінці без необхідності переходити на нову.

Наприклад, коли ви натискаєте на картку продукту зі списку продуктів, ми можемо показати модальне вікно з деталями продукту, при цьому URL змінюється, замість того щоб відображати всю сторінку з деталями продукту.

Реалізація перехоплення маршруту в Next.js

Переваги використання перехоплювача маршруту:

• SEO — кожен перехоплений маршрут має окрему URL-адресу, що покращує виявлення посилань на цю сторінку пошуковими системами.
• Ліниве завантаження — запобігає впровадженню модального вікна, коли воно не потрібне, і воно відображається лише при навігації до цієї сторінки (наприклад, сторінки деталей продукту).

Потік реалізації перехоплювача маршруту:

Коли користувач натискає на заголовок продукту зі списку продуктів, з'являється модальне вікно з деталями продукту, що перехоплює сторінку з деталями продукту, і якщо користувач поділиться/оновить посилання, то відобразиться сторінка з деталями продукту.

Кроки для використання перехоплення маршруту в Next.js:

• Нам потрібно визначити маршрут з @modal для використання перехоплення маршруту.
• Нам потрібно мати сторінки default.tsx та loading.tsx у директорії @modal.

Структура папки для перехоплення маршруту з вибраним матчером (.)

• Використовується матчер (.), (..), (..)(..), (...) для збігу маршруту, який ми хочемо перехопити. У цьому випадку працюватимуть як (...), так і (.), оскільки (...) шукає в корені, а (.) — на тому ж рівні шляху. Переконайтеся, що шлях точно збігається.
  Цей матчер базується на сегменті маршруту, а не на файловій системі.

Конвенція збігу (взято з документації Next.js)

• Найважливіший крок — це включити @modal в макет сторінки, на якій буде список продуктів, так само як і при використанні паралельних маршрутів.

Структура папки перехоплюваного маршруту з файлом макету

export default function RootLayout({  
 children,  
 modal,  
}: {  
 children: React.ReactNode;  
 modal: React.ReactNode;  
}) {  
 return (  



 {children}  
 {modal}  



 );  
}

Важливі зауваження:

• Перехоплений маршрут не працює в групах (group) маршрутів.
• @modal повинен бути на тому ж рівні, що і макет, який має @modal, переданий разом з children.
• Для закриття @modal потрібно використовувати router.back() або замінити URL.
• Якщо ви використовуєте тег `для переходу на іншу сторінку, переконайтеся, що ви використовуєте пропсreplace, **перехід на новий маршрут не виведе маршрут**@modal, але використанняreplace` це зробить.

const handleBack = () => {  
 router.back();  
 };

Homepage

Відомі проблеми

• На даний момент не підтримуються маршрути (group).
• Іноді модальне вікно потребує більше часу на завантаження, ніж очікується.
• Коли ви переходите на попередню сторінку з маршруту @modal, використовуючи Home, Modal (перехоплений маршрут) не закриється, вам потрібно використовувати router.back() або традиційний анкор тег Home.

Для повної реалізації ви можете ознайомитись з моїм репозиторієм на GitHub.

• Демонстрація: https://intercepting-route.ankitbhusal.com.np/
• GitHub: https://github.com/itsankitbhusal/intercepting-routes
• Посилання на офіційну документацію Next.js: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

Якщо щось здається не так, буду радий почути ваші думки з цього приводу. Поділіться вашими пропозиціями в коментарях!

Дякую 😊

Перекладено з: Next.js Intercepting Routes: A Complete Implementation Guide (2025)What is the intercepting route?