Ini adalah dua fitur App Router tingkat lanjut untuk tata letak UI yang canggih. Mereka berkongsi sintaks konvensi folder.
Rute selari memungkinkan satu tata letak merender berbagai "slot" rute independen secara serentak, masing-masing dengan keadaan pemuatan/kesalahannya sendiri. Anda menentukan slot dengan 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></>;
}
Setiap slot menavigasi dan memuat secara mandiri — bagus untuk papan pemuka tempat panel diperbarui secara terpisah, atau menampilkan dua bagian sekaligus.
Rute pencegatan memungkinkan Anda "menangkap" navigasi dan merendernya dalam konteks saat ini (mis. modal) daripada halaman penuh — namun tetap memiliki URL nyata yang dapat dibagikan.
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 pencegatan ((.) tingkat yang sama, (..) satu tingkat naik, (...) akar) mengontrol segmen mana yang dicegat. Ini adalah bagaimana pola gaya Instagram "foto terbuka di modal tetapi memiliki URL-nya sendiri" bekerja.
Rute selari memungkinkan tata letak multi-panel kompleks yang dimuat secara mandiri (papan pemuka) dengan bersih; rute pencegatan memberikan pola "modal dengan URL nyata" (dapat dibagikan, aman saat segarkan, ramah tombol kembali) yang sebaliknya sulit dibangun.
Mereka tingkat lanjut, tetapi menyelesaikan masalah UX nyata — panel independen dan overlay kontekstual — yang sebelumnya memerlukan pekerjaan routing/state manual yang signifikan.