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