nuqs

Name: nuqs
Availability: InStock
Author: PTKDrake

Manage URL query state in React applications with type-safe synchronization.

1|Updated May 24, 2026

Search Tags:#state management #react #next.js #react router #url query state

Ready to run

npx skills add https://github.com/PTKDrake/FIT-vmu --skill nuqs-ptkdrake

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nuqs
Source: https://github.com/PTKDrake/FIT-vmu/tree/main/.agents/skills/nuqs
Command: npx skills add https://github.com/PTKDrake/FIT-vmu --skill nuqs-ptkdrake

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires nuqs, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of managing URL query state in React applications, providing a type-safe and efficient way to sync state with the URL.

Core Features & Use Cases

URL Query State Management: Offers hooks like useQueryState and useQueryStates for managing search params and syncing state with the URL.
Adapters for Frameworks: Supports Next.js, React, Remix, React Router, and plain React.
Built-in Parsers: Includes various parsers for different data types and formats.
Server Components: Facilitates server-side rendering with createSearchParamsCache.
Testing: Provides a testing adapter for unit testing with withNuqsTestingAdapter.
Use Case: Ideal for building filterable lists, sortable tables, and pagination with URL state in React applications.

Quick Start

Install the nuqs skill and wrap your app with the appropriate adapter to start managing your URL query state.

Frequently Asked Questions about nuqs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage URL query state in a React application?▼

You can manage URL query state in React by wrapping your app with a framework adapter and using hooks like `useQueryState` to synchronize component state with URL search parameters type-safely. This enables efficient state management for filterable lists and sortable tables.

How do I sync Next.js server components with URL search params?▼

To sync Next.js server components with URL search params, use the `createSearchParamsCache` function to facilitate server-side rendering. This allows your server components to read and parse URL query state securely during the initial render.

Does nuqs work with React Router and Remix for URL state synchronization?▼

Yes, nuqs works with React Router and Remix by providing specific framework adapters. These adapters allow you to seamlessly synchronize URL query state across various React frameworks, including Next.js, Remix, React Router, and plain React.

What is the best way to build type-safe filterable lists and pagination in React?▼

The best way to build type-safe filterable lists and pagination in React is by using built-in parsers for different data types alongside URL query state hooks. This approach ensures efficient and secure state synchronization directly within the URL.

How do I unit test URL query state management logic in React?▼

You can unit test URL query state management logic by utilizing a dedicated testing adapter called `withNuqsTestingAdapter`. This allows you to simulate and assert URL state changes within your React component testing environment.