Baca Query URL tanpa Reload dengan Cara Menggunakan useSearchParams Next Js

Ditulis oleh Next.js

Cara menggunakan useSearchParams Next.js adalah menambah 'use client' di atas Client Component, lalu memanggil const searchParams = useSearchParams() dari next/navigation. Untuk URL seperti /produk?q=sepatu&page=2, panggil searchParams.get('q') ?? '' agar nilai null punya fallback aman.

'use client';
import { useSearchParams } from 'next/navigation';

export default function FilterAktif() {
  const searchParams = useSearchParams();
  const q = searchParams.get('q') ?? '';
  return <p>Kata kunci: {q}</p>;
}

Baca Query URL dengan useSearchParams di Client Component

Hook ini hanya berjalan di browser. Komponen server tidak bisa memanggilnya karena butuh API navigasi client.

  • Buat file Client Component, contohnya app/produk/page.tsx dengan komponen anak untuk filter.
  • Tambah 'use client' khusus pada komponen yang membaca query.
  • Ambil nilai dengan get('page'), lalu tampilkan sebagai teks, filter list, atau state awal input.

Aturan Wajib: Suspense dan Batasan Static Rendering

Di Next.js 14 ke atas, halaman yang memakai useSearchParams memaksa rendering dinamis sampai batas tertentu. Tanpa Suspense, build sering berhenti karena prerender mencoba membaca query yang belum ada.

Pola Lokasi Catatan
Props searchParams Server Component Baca query tanpa hook
useSearchParams Client Component Perlu Suspense boundary
useRouter + usePathname Client Component Untuk update URL 
import { Suspense } from 'react';
import FilterAktif from './filter';

export default function Page() {
  return (
    <Suspense fallback={<p>Memuat filter...</p>}>
      <FilterAktif />
    </Suspense>
  );
}

BACA JUGA:

Pola Praktis: Filter, Pagination, dan Update URL

  • Baca query aktif dengan useSearchParams() dan usePathname().
  • Ubah URL memakai router.replace() supaya riwayat browser tidak menumpuk.
  • Salin parameter lama lewat new URLSearchParams(searchParams.toString()) sebelum mengubah satu kunci.
  • Konversi angka dengan aman, contohnya Number(searchParams.get('page') ?? 1) || 1.
'use client';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';

export function Pagination() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const page = Number(searchParams.get('page') ?? 1) || 1;

  function keHalaman(next: number) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('page', String(next));
    router.replace(`${pathname}?${params.toString()}`);
  }

  return <button onClick={() => keHalaman(page + 1)}>Halaman {page + 1}</button>;
}

FAQ

Apakah useSearchParams bisa dipakai di Server Component?

Tidak. Server Component menerima query lewat props searchParams.

Kenapa build error missing Suspense?

Halaman melakukan prerender sebelum nilai query tersedia, jadi bungkus komponen pembaca query dengan <Suspense>.

Bagaimana menggabungkan useSearchParams dan useRouter?

Baca URL aktif dengan useSearchParams, lalu tulis perubahan memakai router.replace.

Artikel Terkait