To sta dve napreddovanji funkciji App Routerja za izpopolnjene postavitve uporabniškega vmesnika. Delita uporabo sintakse s konvencijo map.
Vzporedne poti omogočajo, da ena postavitev hkrati upodablja več neodvisnih poti "reženj", vsaka s svojimi stanji nalaganja/napake. Režnje definirate z mapami @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></>;
}
Vsak reženj se neodvisno kremarira in naloži — odličnega za nadzorne plošče, kjer se plošče posodobljajo posebej, ali prikaz dveh razdelkov hkrati.
Prestrezne poti omogočajo, da "ujamete" navigacijo in jo upodobite v trenutnem kontekstu (npr. modalno okno) namesto polne strani — hkrati pa imate še resnično, deljeno 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)
Markerji za prestrezanje ((.) ista raven, (..) ena gor, (...) koren) nadzirajo, kateri segment je presrežen. To je natanko tako, kako deluje vzorec "Instagramovega stila – fotografija se odpre v modalnem oknu in ima svojo URL".
Vzporedne poti omogočajo čiste, neodvisno se nalagajoče postavitve z več okni (nadzorne plošče); prestrezne poti omogočajo "modalno okno z resnično URL" vzorec (deljivo, varno za osvežitev, prijazen za gumb nazaj), ki je sicer težko graditi.
So napredne, vendar rešujejo prave probleme UX-a — neodvisne plošče in kontekstne prekrite — ki so predhodno zahtevali precejšno ročno delo pri rutiranju/stanju.