useSearchParams

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.

app/page.tsx
'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 (
    <div>
      <p>Version: {v}</p>
      <p>Name: {name}</p>
    </div>
  );
}

searchParams in Server Components

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

app/blog/[slug]/page.tsx
export default function Page({ params, searchParams }: {
  params: { slug: string },
  searchParams: { id: string },
}) {
  return (
    <>
      <p>{params.slug}</p>
      <p>{searchParams.id}</p>
    </>
  );
}

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.