Особые маршруты в NextJS

Обычный переход по Link или по адресной строке подменяет содержимое текущего сегмента маршрута. Пользователь видит новую страницу целиком, а предыдущий экран исчезает из разметки. Для многих сценариев этого достаточно: каталог сменяется карточкой товара, список статей - текстом статьи.

Иногда же новый адрес не должен вытеснять то, что уже открыто. Человек листает ленту фотографий, нажимает на снимок и ожидает увидеть его крупнее, но фон с лентой остается на месте - как будто поверх каталога всплыла карточка. URL при этом меняется: ссылкой можно поделиться, кнопка «назад» закрывает карточку и возвращает к списку. Такое поведение называют мягкой навигацией: переход выполнен внутри приложения, а контекст предыдущего экрана сохранен.

Если тот же адрес открыть напрямую - вставить в строку браузера или перейти по ссылке из письма - ожидания другие. Нужна полноценная страница снимка, без «подложки» из ленты. NextJS различает эти два способа захода и может отдать разную разметку при одном и том же пути. Для этого в дереве app используют перехватывающие маршруты - отдельные ветки, которые срабатывают только при мягкой навигации из уже открытого раздела.

Второй особый инструмент связан не с URL, а с тем, как фреймворк монтирует оболочку страницы. Файл layout.jsx живет между переходами: его состояние, скролл и клиентские эффекты не сбрасываются, когда меняется только вложенная page.jsx. Файл template.jsx устроен иначе - при каждом переходе на новый маршрут внутри той же области он создается заново. Это удобно, когда при смене страницы нужно обнулить анимацию, локальный счетчик или любой эффект, который не должен «перетекать» из прошлого экрана.

Перехват и шаблон решают разные задачи, но оба опираются на уже знакомую вам файловую маршрутизацию App Router: никакой отдельной конфигурации вне app не требуется.