jsschools

useSearchParams()

Client hook to read the current URL query string parameters.

Since Next 13 (App Router) Spec ↗

Syntax

import { useSearchParams } from 'next/navigation'; const params = useSearchParams()

Returns

ReadonlyURLSearchParams — Read-only URLSearchParams of the current query.

Examples

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

export function Results() {
  const searchParams = useSearchParams()
  const query = searchParams.get('q') ?? ''
  return <p>Searching for: {query}</p>
}

'use client'
import { Suspense } from 'react'
import { useSearchParams } from 'next/navigation'

function Inner() {
  const sp = useSearchParams()
  return <span>page {sp.get('page') ?? '1'}</span>
}

export function Pager() {
  return (
    <Suspense fallback={null}>
      <Inner />
    </Suspense>
  )
}

Notes

Client Components only. Wrap any component that uses it in `<Suspense>` — otherwise the entire route is forced to client-side render. In Server Components, read the `searchParams` prop of the page instead. Returns a read-only `URLSearchParams`.

See also