nuqs Has a Free API That Most Developers Dont Know About

#react #nextjs #typescript #webdev

nuqs (Next.js URL Query State) is a type-safe search params state manager for Next.js. Like useState, but synced with the URL.

Basic Usage

import { useQueryState } from "nuqs";

function SearchPage() {
  const [search, setSearch] = useQueryState("q");
  const [page, setPage] = useQueryState("page", { defaultValue: "1" });

  return (
    <div>
      <input value={search || ""} onChange={(e) => setSearch(e.target.value)} />
      <p>Page: {page}</p>
      <button onClick={() => setPage(String(Number(page) + 1))}>Next</button>
    </div>
  );
}
// URL: /search?q=react&page=2

Typed Parsers

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

const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
const [tags, setTags] = useQueryState("tags", parseAsArrayOf(parseAsString).withDefault([]));
const [sort, setSort] = useQueryState("sort", parseAsString.withDefault("newest"));

// page is number, tags is string[], sort is string

Server-Side (App Router)

import { createSearchParamsCache, parseAsInteger } from "nuqs/server";

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

export default function Page({ searchParams }) {
  const { page, q } = searchParamsCache.parse(searchParams);
  return <div>Search: {q}, Page: {page}</div>;
}