Cara Membuat Parallel Routes Next Js untuk Dashboard Dua Panel

Ditulis oleh Next.js

Untuk membuat parallel routes dashboard dua panel, buat dua folder @team dan @analytics sejajar page.tsx, lalu render keduanya sebagai props di layout.tsx parent. Langkah yang paling sering terlewat adalah membuat default.tsx di tiap slot, karena tanpa file ini panel bisa hilang saat refresh atau navigasi langsung.

Slot @team dan @analytics Tampil Bersamaan dalam Satu Layout

Parallel routes merender dua segmen dalam satu URL yang sama. Struktur minimalnya seperti ini:

dashboard/
  layout.tsx
  page.tsx
  @team/page.tsx
  @team/default.tsx
  @analytics/page.tsx
  @analytics/default.tsx

Layout parent menerima tiap slot sebagai prop dengan nama yang sama:

export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <aside>{team}</aside>
      <section>{analytics}</section>
    </div>
  );
}

Langkah Membuat Parallel Routes di App Router

  1. Buat folder @team dan @analytics di dalam folder dashboard, sejajar dengan page.tsx.
  2. Tambah page.tsx di tiap slot sebagai konten utama, plus default.tsx sebagai fallback.
  3. Buka dashboard/layout.tsx dan render props team dan analytics di posisi layout yang diinginkan.
  • Nama slot selalu diawali @, contohnya @team.
  • Nama slot tidak masuk ke URL. URL tetap /dashboard.
  • Tiap slot bisa punya loading.tsx dan error.tsx sendiri.

BACA JUGA:

Tabel Slot, File, dan Fungsi

Slot File Catatan
@team page.tsx Konten utama panel tim
@analytics page.tsx Konten utama panel analitik
Semua slot default.tsx Fallback saat refresh atau URL tidak cocok
Parent layout.tsx Menerima dan menempatkan props slot

Saat pengguna refresh atau membuka URL langsung, Next.js memakai default.tsx bila slot aktif tidak punya halaman yang cocok. Isi default.tsx bisa mengembalikan komponen yang sama dengan page.tsx atau pesan kosong.

FAQ

Apakah parallel routes mengubah URL?

Tidak. Kedua slot dirender paralel di dalam layout yang sama tanpa menambah segmen URL.

Apa fungsi default.tsx?

File ini menjadi fallback saat slot tidak punya page yang cocok pada navigasi tersebut.

Bisakah digabung dengan loading dan error?

Bisa. Tiap slot mendukung boundary loading.tsx dan error.tsx secara terpisah.

Artikel Terkait