npm install nuqs

"use client";
import { useQueryState } from "nuqs";

export function SearchInput() {
  const [query, setQuery] = useQueryState("q");

  return (
    <input
      value={query ?? ""}
      onChange={(e) => setQuery(e.target.value || null)}
      placeholder="Search..."
    />
  );
  // URL becomes: /products?q=shoes
}

"use client";
import { useQueryState, parseAsInteger, parseAsBoolean, parseAsArrayOf, parseAsString } from "nuqs";

export function ProductFilters() {
  const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
  const [inStock, setInStock] = useQueryState("inStock", parseAsBoolean.withDefault(false));
  const [tags, setTags] = useQueryState("tags", parseAsArrayOf(parseAsString).withDefault([]));

  return (
    <div>
      <button onClick={() => setPage(page + 1)}>Page {page}</button>
      <label>
        <input
          type="checkbox"
          checked={inStock}
          onChange={(e) => setInStock(e.target.checked)}
        />
        In stock only
      </label>
    </div>
  );
  // URL becomes: /products?page=2&inStock=true&tags=sale,new
}

// app/products/page.tsx (Server Component)
import { createSearchParamsCache, parseAsInteger, parseAsString } from "nuqs/server";

const searchParamsCache = createSearchParamsCache({
  q: parseAsString.withDefault(""),
  page: parseAsInteger.withDefault(1),
});

export default async function ProductsPage({ searchParams }) {
  const { q, page } = searchParamsCache.parse(searchParams);

  const products = await fetchProducts({ query: q, page });
  return <ProductList products={products} />;
}