Hook-ul useSearchParams() – Citirea parametrilor query din URL în Next.js

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

const searchParams = useSearchParams();
const pagina = searchParams.get('pagina');
const filtru = searchParams.get('filtru');

Ce face Hook-ul useSearchParams() - Citirea parametrilor query din URL

Hook-ul useSearchParams() returnează o instanță read-only a interfeței standard `URLSearchParams`.

Permite citirea valorilor prin metoda `.get(‘cheie’)` sau verificarea existenței prin `.has(‘cheie’)`.

În componentele de client, utilizarea acestui hook necesită ca acea componentă să fie învelită într-o barieră ``, altfel întreaga pagină ar putea fi forțată în randare dinamică pe client.

Exemple

Exemplul 1: Preluarea termenului de căutare din URL într-o bară de căutare

Citește parametrul ?q= din URL.

'use client';

import { useSearchParams } from 'next/navigation';

export default function RezultateCautare() {
  const searchParams = useSearchParams();
  const interogare = searchParams.get('q') || '';

  return <h2>Rezultatele căutării pentru: {interogare}</h2>;
}

Ieșire în terminal

Afișează valoarea transmisă în query string.

Greșeli frecvente

• Încercarea de a modifica parametrii apelând searchParams.set(); searchParams returnat este read-only. Pentru navigare cu parametri noi se folosește un URL nou cu router.push().

Comenzi înrudite

• Hook-ul usePathname() - Obținerea căii URL curente: Returnează șirul căii URL curente din bara de adrese a browserului.
• Hook-ul useRouter() din next/navigation - Navigare programatică: Permite declanșarea tranzițiilor de navigare din interiorul funcțiilor și componentelor de client.