Buka Modal tanpa Pindah Halaman dengan Cara Membuat Intercepting Routes Next Js

Ditulis oleh Next.js

Buat file di app/@modal/(..)feed/[id]/page.tsx untuk mencegat app/feed/[id]/page.tsx saat navigasi dari dalam aplikasi, lalu render slot itu sebagai modal di app/layout.tsx. Langkah yang paling sering terlewat adalah menambahkan app/@modal/default.tsx yang me-return null, tanpa file ini refresh halaman membuat layout error atau kosong.

Konvensi Folder (.) (..) dan Syarat Parallel Routes

Intercepting routes selalu dipasangkan dengan parallel routes. Folder @modal adalah slot, sedangkan (..) menentukan level mana yang dicegat.

  • (.)feed/[id]: mencegat satu level di bawah, cocok untuk modal di dalam segmen yang sama.
  • (..)feed/[id]: mencegat satu level ke atas, pola paling umum untuk feed ke detail foto.
  • (..)(..)feed/[id]: mencegat dua level ke atas, dipakai untuk modal dari nested layout yang dalam.

Setiap slot @modal wajib punya default.tsx. Next.js merender file ini saat slot tidak aktif, misalnya saat user refresh atau membuka URL langsung.

BACA JUGA:

Langkah Membuat Modal Intercepting Routes

Struktur minimalnya seperti ini:

app/
  layout.tsx
  feed/
    [id]/page.tsx
  @modal/
    default.tsx
    (..)feed/[id]/page.tsx
  1. Buat halaman normal di app/feed/[id]/page.tsx sebagai versi full page.
  2. Buat file intercept di app/@modal/(..)feed/[id]/page.tsx berisi konten modal yang sama, tapi dibungkus overlay.
  3. Tambahkan app/@modal/default.tsx dengan isi return null.
  4. Ubah app/layout.tsx agar menerima prop modal dan merendernya sejajar children.
  5. Untuk tombol tutup, buat komponen Client dengan useRouter() dari next/navigation lalu panggil router.back().
// app/layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <html lang="id">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}
Masalah Penyebab Solusi
Modal tidak muncul Link memakai reload atau path salah Gunakan Link ke /feed/1 tanpa refresh
Refresh tampil kosong Belum ada default.tsx Tambah @modal/default.tsx return null
Tutup modal error router dari paket lama Gunakan useRouter dari next/navigation

FAQ

Apakah intercepting routes butuh use client?

Tidak, halamannya bisa tetap Server Component, hanya overlay dan tombol tutup yang butuh Client Component.

Kenapa halaman langsung diakses tidak menampilkan modal?

Akses langsung merender feed/[id]/page.tsx penuh, sedangkan default.tsx membuat slot modal kosong.

Bisakah dipakai selain modal foto?

Bisa, pola yang sama cocok untuk form login, edit cepat, dan preview produk.

Artikel Terkait