url-state-management
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
Install
npx skillscat add andrelandgraf/fullstackrecipes/url-state-management Install via the SkillsCat registry.
This skill enables synchronization between React state and URL query parameters using the nuqs library. It solves the problem of losing UI state during page refreshes or navigation by making filters, search queries, and dialog states deep-linkable. Developers should use it when building applications that require shareable URLs and consistent state preservation during browser navigation.
URL State Management
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
Prerequisites
Complete these recipes first (in order):
Next.js on Vercel
Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercelCookbook - Complete These Recipes in Order
URL State with nuqs
Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setupWorking with nuqs
Manage React state in URL query parameters with nuqs. Covers Suspense boundaries, parsers, clearing state, and deep-linkable dialogs.
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-nuqsCategories
Install
npx skillscat add andrelandgraf/fullstackrecipes/url-state-management Install via the SkillsCat registry.