Jedná se o dvě pokročilé funkce App Router pro propracované rozvržení uživatelského rozhraní. Sdílejí syntaxi založenou na konvenci složek.
Paralelní trasy umožňují jednomu rozvržení vykreslit více nezávislých "slotů" trasy současně, přičemž každý má svůj vlastní stav načítání/chyby. Sloty definujete pomocí složek @name:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
Každý slot naviguje a načítá se nezávisle — skvělé pro dashboardy, kde se panely aktualizují odděleně, nebo pro zobrazení dvou částí najednou.
Zachycující trasy vám umožňují "zachytit" navigaci a vykreslit ji v aktuálním kontextu (např. v modálním okně) místo úplné stránky — přičemž stále máte skutečnou, sdílitelnou URL.
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
Značky zachycení ((.) stejná úroveň, (..) o jednu úroveň výše, (...) kořen) řídí, který segment je zachycen. Tímto způsobem funguje přesně stejně jako Instagram-stylový vzor "fotografie se otevře v modálním okně, ale má svou vlastní URL".
Paralelní trasy umožňují čistě realizovat složitá, nezávisle se načítající vícesekcová rozvržení (dashboardy); zachycující trasy poskytují vzor "modální okno se skutečnou URL" (sdílitelný, bezpečný při obnovení, přátelský k tlačítku zpět), který by jinak bylo obtížné vytvářet.
Jsou pokročilé, ale řeší reálné problémy UX — nezávislé panely a kontextové překryvy — které dříve vyžadovaly významnou manuální práci na směrování/stavu.