nuqs Best Practices

Type-safe URL query state management for React. Like useState, but stored in the URL.

Setup (Required First)

Wrap your app with the appropriate adapter:

// Next.js App Router - app/layout.tsx
import { NuqsAdapter } from 'nuqs/adapters/next/app'

export default function RootLayout({ children }) {
  return <NuqsAdapter>{children}</NuqsAdapter>
}

// Next.js Pages Router - pages/_app.tsx
import { NuqsAdapter } from 'nuqs/adapters/next/pages'