How do I prevent hydration errors when using nuqs in Next.js?

The skill highlights the importance of wrapping client components that use useQueryState in React Suspense boundaries to handle the asynchronous nature of URL params during hydration.

Nuqs is a React library that allows you to manage component state through URL query parameters, similar to useState but with built-in persistence and deep-linking capabilities.

Does this skill support the Next.js App Router?

Yes, it includes detailed setup instructions for the NuqsAdapter in Next.js App Router, as well as server-side parsing using searchParamsCache.

Is it possible to update multiple URL parameters at once?

Yes, the useQueryStates hook (plural) is specifically designed to handle multiple keys and batch updates into a single URL change.

Can I use nuqs for non-string data types like numbers or arrays?

Absolutely. Nuqs provides built-in parsers for integers, floats, booleans, dates, arrays, and even JSON objects to ensure type safety.

Nuqs URL State Management

Name: Nuqs URL State Management
Author: Microck

byMicrock

•

開発者ツール

Manages type-safe React state synchronized with URL query parameters across Next.js, Remix, and React Router.

Nuqs provides a powerful, type-safe alternative to standard React state by persisting data directly in the URL's query string. This skill assists developers in implementing complex filtering, pagination, and search interfaces while maintaining deep-linkable URLs and supporting both client and server-side rendering. It includes comprehensive guidance on framework-specific adapters, built-in parsers for various data types, and advanced patterns for functional updates, batching, and loading states with React Transitions.

主な機能

01Type-safe state management via URL query parameters

02Extensive built-in parsers for numbers, booleans, arrays, and JSON

032 GitHub stars

04Framework adapters for Next.js, Remix, React Router, and SPAs

05Support for Server Components with search params caching

06Advanced control over URL history, shallow routing, and throttling

ユースケース

01Implementing filterable and sortable product listings or data tables

02Creating shareable, deep-linkable search interfaces with complex criteria

03Managing multi-step form state or pagination without page reloads

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck nuqs

For use in Claude.ai and ChatGPT

Download Skill