Perbaiki Slug Kosong dengan Cara Mengatasi Route Params Undefined Next Js

Ditulis oleh Next.js

Slug kosong di Next.js hampir selalu berasal dari tiga hal: nama folder dinamis tidak cocok dengan kunci yang dibaca, params belum di-await di Next.js 15, atau kode Client Component membaca params seperti Server Component. Perbaiki ejaan folder dulu, lalu sesuaikan cara akses params dengan jenis komponennya.

Penyebab Route Params Undefined di App Router

App Router mengirim params berbeda tergantung konteks eksekusi. Server Component menerima params sebagai props async, Client Component harus membukanya dengan use(), Route Handler membacanya dari argumen kedua.

  • Folder app/blog/[slug]/page.tsx hanya menghasilkan params.slug. Membaca params.id membuat nilainya undefined.
  • Di Next.js 15, params di Server Component berupa Promise. Akses langsung params.slug tanpa await memicu error atau nilai kosong.
  • Client Component tidak menerima props params langsung. Pola Pages Router dengan useRouter().query tidak berlaku di sini.

Tabel Diagnosis Route Params Undefined

Bedakan dulu params untuk segmen dinamis, searchParams untuk query seperti ?q=next, dan usePathname() yang hanya mengembalikan string path.

Masalah Penyebab Solusi
params.slug kosong Nama folder [id] dibaca sebagai slug Samakan ejaan folder dan kunci params
Error saat build params belum di-await di Next.js 15 Ubah page menjadi async lalu await params
Query terbaca undefined Query dibaca sebagai route params Gunakan searchParams untuk query URL

BACA JUGA:

Cara Memperbaiki Params Undefined dengan Langkah Benar

Cek struktur folder app/blog/[slug]/page.tsx sebelum mengubah kode. Satu huruf salah membuat seluruh objek params terlihat kosong.

  1. Pastikan path folder benar dan tidak ada duplikat route statis.
  2. Perbaiki destructuring sesuai nama folder, misalnya { slug } bukan { id }.
  3. Jadikan Server Component async dan await params di Next.js 15.
  4. Validasi tipe params sebelum dipakai untuk query database.
  5. Untuk params opsional dan catch-all, siapkan fallback array kosong.
// app/blog/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  if (!slug) return <p>Slug tidak ditemukan.</p>;
  return <h1>{slug}</h1>;
}
'use client';
import { use } from 'react';

export default function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = use(params);
  return <h1>{slug}</h1>;
}

FAQ

Apakah params perlu await di semua versi Next.js?

Tidak. Await wajib di Next.js 15 karena params berupa Promise, versi lama menerima objek biasa.

Kenapa params ada di dev tapi undefined saat build?

Kondisi ini biasanya muncul dari prerender statis tanpa nilai params valid atau validasi tipe yang kurang.

Kapan memakai searchParams bukan route params?

Gunakan searchParams untuk filter, pagination, dan query opsional yang tidak menentukan struktur route.

Artikel Terkait