Пост Управление стейтом в 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/