Ambil Slug Dinamis dengan Cara Membaca Route Params App Router Next Js

Ditulis oleh Next.js

Buat folder app/blog/[slug]/page.tsx, lalu baca params.slug dari props Server Component. Kesalahan yang paling sering terjadi adalah membaca params tanpa await di Next.js 15, padahal params sekarang berupa Promise.

Ambil Params dari Props di Server Component

Nama folder dalam kurung siku menentukan nama kunci di objek params. Folder [slug] menghasilkan params.slug, folder [id] menghasilkan params.id.

Ikuti langkah ini untuk route /blog/hello-world:

1. Buat folder dinamis app/blog/[slug]/.
2. Buat file page.tsx sebagai Server Component async.
3. Ambil nilai dengan (await params).slug.
4. Validasi slug sebelum dipakai query database.
5. Tampilkan 404 dengan notFound() bila slug tidak valid.

import { notFound } from "next/navigation";

type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogDetailPage({ params }: Props) {
  const { slug } = await params;

  if (!slug || slug.length < 3) {
    notFound();
  }

  return <h1>Artikel: {slug}</h1>;
}

BACA JUGA:

Perbedaan Params, Search Params, dan Pathname

Ketiga data ini terlihat mirip karena sama-sama berasal dari URL, tetapi sumber dan cara bacanya berbeda:

  • Route params: bagian path dinamis, contoh /blog/hello-world. Dibaca dari props params.
  • Search params: query setelah tanda tanya, contoh ?page=2. Dibaca dari props searchParams di server.
  • Pathname: path aktif tanpa query, contoh /blog/hello-world. Dibaca dengan usePathname() di Client Component.
Sumber Cara Baca Catatan
Route params Props params Ditentukan nama folder
Search params Props searchParams Opsional dan berupa string
Pathname usePathname Hanya Client Component

Gunakan useParams() dari next/navigation hanya bila komponen memakai "use client" dan butuh membaca slug dari event, efek, atau state lokal.

FAQ

Apakah params perlu await di Next.js terbaru?

Ya, di Next.js 15 params berupa Promise sehingga perlu await params sebelum membaca propertinya.

Kenapa params undefined padahal folder sudah [id]?

Biasanya nama kunci salah, misalnya membaca params.slug padahal folder bernama [id].

Bagaimana membaca params dan searchParams sekaligus?

Terima kedua props sekaligus, contoh { params, searchParams }, lalu await keduanya di Server Component.

Artikel Terkait