Agent Skills: URL State Management

Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.

UncategorizedID: andrelandgraf/fullstackrecipes/url-state-management

Install this agent skill to your local

pnpm dlx add-skill https://github.com/andrelandgraf/fullstackrecipes/tree/HEAD/skills/url-state-management

Skill Files

Browse the full folder contents for url-state-management.

Download Skill

Loading file tree…

skills/url-state-management/SKILL.md

Skill Metadata

Name
url-state-management
Description
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.

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-vercel

Cookbook - 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-setup

Working 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-nuqs