Filter dan Pagination tanpa Reload dengan Cara Membuat Query Parameter Next Js

Ditulis oleh Next.js

Cara membuat query parameter Next.js untuk filter dan pagination cukup baca nilai aktif, bangun URL baru memakai URLSearchParams, lalu pindah dengan Link atau useRouter. Langkah yang paling sering terlewat adalah menyalin params lama sebelum mengubah satu kunci, sehingga filter kategori hilang saat ganti halaman. Di App Router, Server Component membaca lewat props searchParams, Client Component membaca lewat useSearchParams.

Jawab Cepat: Pola Query Parameter di App Router

Server Component menerima searchParams sebagai props di page.tsx. Client Component memakai hook useSearchParams untuk membaca URL aktif. Untuk mengubah URL gunakan router.push, router.replace, atau Link.

  • Gunakan Link untuk pagination, tab filter, dan sortir yang bisa diklik.
  • Gunakan router.push saat perubahan query berasal dari input search, select, atau submit form.
  • Gunakan router.replace saat mengetik di kolom pencarian agar riwayat back tidak menumpuk.

Cara Membuat Query Parameter Next Js untuk Navigasi dan Filter

  1. Baca query aktif dengan useSearchParams dan pathname dengan usePathname.
  2. Salin ke new URLSearchParams(searchParams.toString()).
  3. Ubah satu kunci dengan set atau hapus dengan delete.
  4. Pindah dengan router.push(`${pathname}?${params}`) atau render lewat Link.
<Link href="/produk?q=sepatu&page=2">Halaman 2</Link>
<Link href="/produk?kategori=jaket&sort=murah">Filter Jaket</Link>
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function Filter() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function gantiHalaman(page: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", page);
    router.push(`${pathname}?${params.toString()}`);
  }
  return <button onClick={() => gantiHalaman("3")}>Ke halaman 3</button>;
}

BACA JUGA:

Membaca Query Parameter di Server Component

Di app/produk/page.tsx, terima searchParams lalu normalisasi sebelum dipakai untuk fetch database atau API.

  • string: untuk ?q=sepatu, nilainya teks tunggal.
  • string[]: untuk ?tag=a&tag=b, nilainya array.
  • undefined: untuk kunci yang tidak ada di URL, wajib diberi default.
type Props = {
  searchParams: Promise<{ q?: string; page?: string }>;
};

export default async function Page({ searchParams }: Props) {
  const params = await searchParams;
  const q = params.q ?? "";
  const page = Number(params.page ?? "1") || 1;
}

Tabel Perilaku API Query Parameter

API Dipakai di Catatan
searchParams Server Component Diterima sebagai props page
useSearchParams Client Component Read only, butuh Suspense
usePathname Client Component Untuk menyusun URL baru
useRouter Client Component push tambah histori, replace tidak

FAQ

Apakah query parameter memicu re-render Server Component?

Ya, perubahan search params membuat segmen page dirender ulang di server dengan nilai baru.

Bagaimana menghapus satu query tanpa menghilangkan yang lain?

Salin semua params aktif, panggil params.delete("sort"), lalu push URL hasilnya.

Kenapa useSearchParams butuh Suspense boundary?

Hook ini membaca URL saat prerender, jadi Next.js meminta Suspense agar fallback statis bisa dibuat.

Artikel Terkait