Tangkap Semua Segmen URL dengan Cara Membuat Catch All Route Next Js

Ditulis oleh Next.js

Cara membuat catch all route Next.js adalah membuat folder bernama […slug] di dalam app, lalu menambahkan page.tsx di dalamnya. Semua segmen setelah folder induk masuk ke params.slug sebagai array. Pola ini cocok untuk dokumentasi, kategori bertingkat, atau halaman CMS.

Buat Folder […slug] untuk Cara Membuat Catch All Route Next Js

Struktur paling umum adalah app/docs/[...slug]/page.tsx. URL /docs/a/b/c menghasilkan slug: ["a", "b", "c"]. Satu file menangani kedalaman URL berapa pun.

  • [id]: hanya satu segmen, contoh /docs/intro.
  • […slug]: satu segmen atau lebih, contoh /docs/a/b. URL induk /docs tidak cocok.
  • [[…slug]]: nol segmen atau lebih, jadi /docs dan /docs/a/b sama-sama cocok.

Langkah Membuat Catch All Route di App Router

Kesalahan yang sering terjadi adalah membaca params sebagai objek biasa di Next.js terbaru. Di App Router, params berupa Promise sehingga perlu await.

  1. Buat folder app/docs/[...slug].
  2. Tambah file page.tsx di dalam folder tersebut.
  3. Baca params dengan await, lalu gunakan array slug.
  4. Render daftar segmen, breadcrumb, atau konten berdasarkan slug.
type Props = {
  params: Promise<{ slug: string[] }>;
};

export default async function DocsPage({ params }: Props) {
  const { slug } = await params;
  const path = slug.join("/");

  return (
    <main>
      <h1>Dokumen: {path}</h1>
      <p>Jumlah segmen: {slug.length}</p>
    </main>
  );
}
  • params.slug selalu array pada catch all route.
  • Gunakan slug.join("/") untuk path lengkap atau key konten CMS.
  • Gunakan slug.map untuk membuat breadcrumb bertingkat.

BACA JUGA:

Tabel Perilaku Route Dinamis App Router

Rute /docs tanpa segmen hanya cocok dengan optional catch all. Panggil notFound() dari next/navigation apabila kombinasi segmen tidak ada di database atau CMS.

Pola URL Cocok Catatan
[id] /docs/intro Satu segmen saja
[…slug] /docs/a/b Minimal satu segmen
[[…slug]] /docs Boleh tanpa segmen

FAQ

Apakah catch all route bisa digabung route statis?

Bisa. Route statis seperti /docs/bantuan diprioritaskan sebelum [...slug].

Kapan memakai optional catch all [[…slug]]?

Pakai saat halaman induk dan halaman bertingkat memakai file yang sama, misalnya /docs dan /docs/a/b.

Bagaimana membaca catch all route di Client Component?

Gunakan useParams() dari next/navigation, lalu baca params.slug sebagai array string.

Artikel Terkait