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

Перехват с точкой в имени папки срабатывает, когда целевой маршрут лежит на том же уровне вложенности. Если полная страница объявлена выше по дереву, а мягкий переход начинается из вложенного раздела, нужен префикс с двумя точками - он указывает на сегмент на один уровень выше текущей папки.

Возьмем каталог /albums и общие страницы альбомов /album/[id]. Из списка альбомов пользователь должен открыть превью, не покидая список целиком, а по прямой ссылке - увидеть обычную страницу альбома. Давайте разложим файлы так:

/src/
- /app/
  - /album/
    - /[id]/
      - page.jsx
  - /albums/
    - page.jsx
    - /(..)album/
      - /[id]/
        page.jsx

Полная страница альбома живет в корне приложения рядом с разделом списка. Давайте опишем ее в page.jsx:

export default async function AlbumPage({ params }) {
	let { id } = await params;
	return (
		<article>
			<h1>Album {id}</h1>
			<p>Standalone album page</p>
		</article>
	);
}

Перехват из /albums подставит другую разметку для того же id. Переход по Link на /album/5 возьмет компонент из перехвата, а жесткое обновление или закладка откроют файл из app/album. Давайте добавим второй page.jsx во вложенной ветке с двумя точками:

export default async function AlbumPreview({ params }) {
	let { id } = await params;
	return (
		<aside>
			<h2>Album {id}</h2>
			<p>Preview while browsing albums</p>
		</aside>
	);
}

Сделайте список проектов и отдельные страницы проекта на уровень выше, с перехватом превью из списка.

Выведите в перехвате краткий текст, а на полной странице - развернутое описание того же проекта.