Заметки про React: “Управление стейтом в URL в Next.js App Router В своей статье Аврора Ша…”

Управление стейтом в URL в Next.js App Router

В своей статье Аврора Шарфф на примере компонента фильтра показывает, что не так просто управлять стейтом в URL search params в Next.js App Router. Для того чтобы сразу показывать выбранные фильтры при изменении URL, необходимо использовать useTransition и useOptimistic. Иначе URL обновится только после окончания рендера страницы. Также автор рекомендует валидировать входящие данных из URL с помощью валидатора Zod.

Вместо изобретения собственного велосипеда можно использовать библиотеку nuqs – типобезопасный менеджер стейта в URL search params. У него есть встроенный валидатор, где можно объявить дефолтный стейт. Также он поддерживает Next.js и useTransition. Пример использования:


// searchParams.ts

import { parseAsString, createSearchParamsCache, parseAsArrayOf } from 'nuqs/server';

export const searchParams = {
  category: parseAsArrayOf(parseAsString).withDefault([]),
  q: parseAsString.withDefault(''),
};
export const searchParamsCache = createSearchParamsCache(searchParams);


// Search.tsx

export default function Search() {
  const params = useParams();
  const [isPending, startTransition] = useTransition();
  const [q, setQ] = useQueryState(
    'q',
    searchParams.q.withOptions({
      shallow: false,
      startTransition,
    }),
  );

  return (
    <form>
      <input
        onChange={e => {
          setQ(e.target.value);
        }}
        defaultValue={q}
        type="search"
      />
      <SearchStatus searching={isPending} />
    </Form>
  );
}

https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/