To su dvije napredne App Router značajke za sofisticirane UI rasporede. Dijele sintaksu konvencije mapa.
Paralelne rute omogućavaju jednoj postavci prikazati više neovisnih ruta "utora" istovremeno, svaki sa vlastitim stanjem učitavanja/greške. Definirate utore sa mapama @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></>;
}
Svaki utor se neovisno kreće i učitava — odličan za nadzorne ploče gdje se paneli ažuriraju odvojeno, ili prikazati dva odjeljka odjednom.
Presječne rute omogućavaju vam da "uhvatite" navigaciju i je prikažete u trenutnom kontekstu (npr. modal) umjesto pune stranice — dok i dalje imate pravu, dijelivu 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)
Oznake presjecanja ((.) ista razina, (..) jedno gore, (...) korijen) kontroliraju koji je segment presječen. Ovo je točno kako funkcionira Instagram-stil "fotografija se otvara u modalu ali ima svoju URL" uzorak.
Paralelne rute omogućavaju kompleksne, neovisno učitane rasporede s više ploča (nadzorne ploče) čisto; presječne rute pružaju "modal s pravom URL" uzorak (dijeliv, osvježavanjem siguran, gumb-povratka-prikladan) koji je inače teško izgraditi.
Oni su napredniji, ali rješavaju stvarne UX probleme — neovisne ploče i kontekstne naljepnice — koji su prethodno zahtijevali značajan ručni rad oko rutiranja/stanja.