The useSearchParams hook allows you to read URL search params from a Client Component. To access search params in Server Components, use searchParams.

The useSearchParams hook returns a readonly version of the URLSearchParams interface.

'use client';

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();

  // When URL contains ?v=2&name=lee
  const version = searchParams.get('v');
  const name = searchParams.get('name');

  return (
      <p>Version: {v}</p>
      <p>Name: {name}</p>

searchParams in Server Components

Pages have access to URL search params through the searchParams prop:

export default function Page({ params, searchParams }: {
  params: { slug: string },
  searchParams: { id: string },
}) {
  return (

Good to know:

  • During static rendering, any component using the useSearchParams hook will skip the prerendering step and instead be rendered on the client at runtime.