Next.js useSearchParams Hook in Next.js for Dynamic URL Query

useSearchParams() hook allows developers to extract specific parameters, check for their existence, and perform operations based on them. it ensures that the application remains responsive to changes in the query string, facilitating dynamic content updates without full page reloads.

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()
  const search = searchParams.get('search')

  return <>Search: {search}</>
}

After obtaining the searchParams object using useSearchParams, the get method is called on it with the parameter name ‘search’. This retrieves the value of the search query parameter from the URL.