Iki minangka loro fitur App Router tingkat lanjut kanggo tata letak UI sing canggih. Padha nduweni sintaks konvensi folder.
Rute paralel ngidini siji layout ngrender marang-marang slot rute "mandiri" bebarengan, saben siji duwe kahanane pamuat/kesalahan dhewe. Sampeyan nggawe slot nganggo folder @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></>;
}
Saben slot navigasi lan muata mandiri — oke banget kanggo dashboard ngendi panel ngoprek kapisah-pisahan, utawa nampakake rong bagian bebarengan.
Rute yang nakeprak ngidini sampeyan "nyedhot" navigasi lan ngrender ing konteks saiki (cth modal) tinimbang kaca utuh — nanging tetep duwe URL nyata lan bisa dibagi.
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)
Penanda nakeprak ((.) tingkat padha, (..) siji munggah, (...) root) ngontrol segment endi sing nakeprak. Iki kutha carane pola Instagram-gaya "foto mbukak ing modal nanging duwe URL dhewe" makarya.
Rute paralel ngidini tata letak multi-pane kompleks sing muatan mandiri (dashboard) kanthi bersih; rute yang nakeprak ngetokake pola "modal kanthi URL nyata" (bisa dibagi, aman nganti-nganti, konco tombol mundur) sing dene iku angel digawe.
Kluwatan lanjut, nanging padha metoni problema UX nyata — panel mandiri lan overlay kontekstual — sing ngarep-arep mbutuhake kerja routing/negara manual sing akeh.