nuqs

Manage URL query parameters with type-safe parsing and schema validation.

12|Updated Apr 5, 2024
One-click install
npx skills add https://github.com/fellipeutaka/website --skill nuqs-fellipeutaka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuqs
Source: https://github.com/fellipeutaka/website/tree/main/.agents/skills/nuqs
Command: npx skills add https://github.com/fellipeutaka/website --skill nuqs-fellipeutaka

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Nuqs streamlines URL query state management by providing a type-safe, declarative API for handling URL parameters, reducing bugs and improving developer experience.

Core Features & Use Cases

  • Type-safe URL query state management: Write and review URL parameters confidently with compile-time safety.
  • Rich parser library: Convert string URL parameters into numbers, booleans, enums, complex objects, and handle defaults.
  • Server integration: Parse parameters server-side with createLoader and createSearchParamsCache for SSR, Next.js, Remix, and more.
  • Example: Easily synchronize search filters, pagination, or form states with URLs, ensuring consistency across client and server.

Quick Start

Use the nuqs skill to parse and manage URL parameters for your Next.js app.

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 parameters with type safety in React?

You can manage URL query parameters with type safety by using a declarative API that provides compile-time checks for reading and writing URL state, reducing runtime bugs and improving developer experience.

How do I parse URL query strings into complex objects during server-side rendering?

To parse URL query strings during server-side rendering, you can use a server integration utility like createLoader or createSearchParamsCache to safely parse parameters into typed objects for frameworks like Next.js or Remix.

Can I synchronize React state with URL search parameters?

Yes, you can synchronize React state with URL search parameters by mapping filter, pagination, or form states to the URL, ensuring that application state remains consistent across both client and server.

What is the best way to handle default values for URL query parameters?

The best way to handle default values for URL query parameters is to use a rich parser library that automatically applies fallback values when parameters are missing or invalid during the string conversion process.

Does nuqs work with Next.js for URL state management?

Yes, nuqs works with Next.js by providing server-side integration tools that parse URL parameters during SSR, ensuring your type-safe query state remains consistent between the server render and client hydration.