Bedakan Props dan Hook pada Cara Membaca Search Params App Router Next Js

Ditulis oleh Next.js

Cara membaca search params App Router Next.js tergantung lokasi komponen. Page Server Component menerima props searchParams langsung dari Next.js, sedangkan Client Component membaca lewat hook useSearchParams dari next/navigation. Jangan tertukar dengan useRouter().query milik Pages Router yang tidak berlaku di App Router.

Baca Search Params di Server Component Page

File app/page.tsx atau app/blog/page.tsx menerima objek searchParams secara otomatis. Untuk URL /blog?q=next&tag=app, nilainya berupa objek biasa.

Nilai tiap kunci bisa string, string[], atau undefined. Bentuk array muncul saat kunci ditulis berulang, misalnya ?tag=a&tag=b. Akses selalu dengan pengecekan karena query bisa tidak ada.

// app/blog/page.tsx
type Props = {
  searchParams: { [key: string]: string | string[] | undefined };
};

export default function Page({ searchParams }: Props) {
  const q = searchParams.q;
  const query = Array.isArray(q) ? q[0] : q ?? "";
  return <p>Hasil untuk: {query}</p>;
}

Tabel Pola Akses Search Params App Router

Gunakan pola sesuai tempat kode berjalan agar tidak kena error hook di server.

Lokasi Cara akses Catatan
Page Server Component props searchParams Tanpa hook, tanpa use client
generateMetadata argumen searchParams Untuk judul dinamis dari query
Client Component useSearchParams Perlu Suspense boundary

BACA JUGA:

Baca Search Params di Client Component

Komponen interaktif seperti filter atau kolom pencarian tidak menerima props searchParams otomatis. Baca dari URL browser memakai hook navigasi.

  1. Tandai file dengan “use client” di baris pertama.
  2. Impor useSearchParams dari next/navigation.
  3. Panggil searchParams.get(“q”) untuk mengambil satu nilai.
  4. Bungkus komponen pemakai hook di dalam <Suspense> pada page induk.
"use client";
import { useSearchParams } from "next/navigation";

export function Filter() {
  const searchParams = useSearchParams();
  const q = searchParams.get("q") ?? "";
  return <p>Filter aktif: {q}</p>;
}
  • Memakai useRouter().query ala Pages Router di App Router.
  • Memanggil useSearchParams di Server Component tanpa “use client”.
  • Lupa Suspense sehingga build menampilkan error prerender dinamis.
  • Mengira get() mengembalikan array, padahal hanya string pertama.

FAQ

Apakah searchParams di Page perlu useSearchParams?

Tidak. Page Server Component cukup membaca props searchParams yang sudah disediakan Next.js.

Kenapa useSearchParams butuh Suspense?

Hook tersebut membaca bagian URL yang dinamis saat prerender, jadi Next.js meminta boundary Suspense agar fallback statis bisa dirender dulu.

Bagaimana membaca satu query seperti ?q=next?

Di server gunakan searchParams.q dengan cek array, di client gunakan searchParams.get(“q”).

Artikel Terkait