Перехват из корня в NextJS

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

Пусть новости живут по адресу /news/[slug], а из личного кабинета /account/settings нужно открыть статью поверх настроек. Давайте разместим файлы так:

/src/
- /app/
  - /news/
    - /[slug]/
      - page.jsx
  - /account/
    - /settings/
      - page.jsx
      - /(...)news/
        /[slug]/
        page.jsx

Обычная статья подходит для прямого захода и для ссылок извне. Давайте опишем ее в page.jsx:

export default async function NewsArticle({ params }) {
	let { slug } = await params;
	return (
		<article>
			<h1>{slug}</h1>
			<p>Full article layout</p>
		</article>
	);
}

Из настроек при мягкой навигации покажем компактный блок с тем же slug. Ссылка из /account/settings на /news/release-notes отрисует панель из глубокой ветки, а тот же URL после перезагрузки вернет полноценную страницу из app/news. Давайте добавим перехватывающий page.jsx:

export default async function NewsPanel({ params }) {
	let { slug } = await params;
	return (
		<section>
			<h2>{slug}</h2>
			<p>Article panel from settings</p>
		</section>
	);
}

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

Добавьте в перехват кнопку закрытия, которая возвращает на экран настроек через клиентский переход назад.