Ini adalah dua fitur App Router canggih untuk tata letak UI yang canggih. Mereka berbagi sintaks konvensi folder.
Rute paralel memungkinkan satu tata letak untuk merender beberapa "slot" rute independen secara bersamaan, masing-masing dengan status loading/error-nya 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 independen — bagus untuk dashboard di mana panel diperbarui secara terpisah, atau menampilkan dua bagian sekaligus.
Rute penyadapan memungkinkan Anda untuk "menangkap" navigasi dan merendernya dalam konteks saat ini (mis. modal) alih-alih halaman penuh — sambil tetap memiliki URL yang nyata dan 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 penyadapan ((.) level yang sama, (..) satu level atas, (...) akar) mengontrol segmen mana yang disadap. Ini persis bagaimana pola "foto terbuka di modal tetapi memiliki URL-nya sendiri" gaya Instagram berfungsi.
Rute paralel memungkinkan tata letak multi-panel yang kompleks dan memuat secara independen (dashboard) dengan bersih; rute penyadapan memberikan pola "modal dengan URL nyata" (dapat dibagikan, aman-refresh, ramah-tombol-kembali) yang sebaliknya sulit untuk dibangun.
Mereka canggih, tetapi mereka menyelesaikan masalah UX nyata — panel independen dan overlay kontekstual — yang sebelumnya memerlukan pekerjaan perutean/status manual yang signifikan.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi