Перехват на том же уровне в NextJS

Представим раздел /feed с лентой и отдельные страницы снимков по адресу /feed/photo/1. Полноценная страница фото должна открываться при прямом заходе, а при клике из ленты - компактный вариант, не убирающий список с экрана. Для перехвата на том же уровне рядом с папкой photo создают соседнюю ветку с префиксом точки в имени сегмента - в URL она не появляется, зато NextJS понимает, что это альтернатива тому же пути при мягкой навигации.

Давайте соберем такую структуру в каталоге app/feed:

/src/
- /app/
  - /feed/
    - page.jsx
    - /photo/
      - /[id]/
        page.jsx
    - /(.)photo/
      - /[id]/
        page.jsx

На странице ленты оставим ссылки на снимки через Link - без них перехват просто не сработает.

Полная страница снимка подойдет для прямого открытия адреса. Давайте оформим файл page.jsx в обычной ветке photo:

export default async function PhotoPage({ params }) {
	let { id } = await params;
	return (
		<main>
			<h1>Photo {id}</h1>
			<p>Full page view</p>
		</main>
	);
}

Перехватывающая ветка рисует тот же идентификатор, но в виде легкой карточки поверх контекста ленты. Клик по ссылке в /feed подставит этот вариант, а обновление страницы по тому же URL покажет разметку из обычной папки photo. Давайте добавим второй page.jsx:

export default async function PhotoModal({ params }) {
	let { id } = await params;
	return (
		<div role="dialog">
			<h2>Photo {id}</h2>
			<p>Overlay from feed</p>
		</div>
	);
}

Сделайте раздел /shop со списком товаров и перехват карточки товара на том же уровне, что и папка товара.

Сделайте для перехвата и для полной страницы разные заголовки, чтобы по тексту было видно, какой вариант открыт.