URL State Patterns

Sync React state to URL query params with nuqs.

Prerequisites

Complete these setup recipes first:

• URL State with nuqs

Suspense Wrapper

nuqs reads useSearchParams, so it needs a Suspense boundary. Colocate it by exporting a public wrapper that suspends an internal client component — consumers then use the component without adding Suspense themselves.

import { Suspense } from "react";

type SearchInputProps = { placeholder?: string };