Url State Management

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

```bash
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.

```bash
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.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-nuqs
```