nuqs
SKILL.md
Community nuqs Best Practices for Next.js
Comprehensive guide for type-safe URL query state management with nuqs in Next.js applications. Contains 42 rules across 8 categories, prioritized by impact to guide code generation, refactoring, and code review.
When to Apply
Reference these guidelines when:
- Implementing URL-based state with nuqs
- Setting up nuqs in a Next.js project
- Configuring parsers for URL parameters
- Integrating URL state with Server Components
- Optimizing URL update performance
- Debugging nuqs-related issues
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Parser Configuration | CRITICAL | parser- |
| 2 | Adapter & Setup | CRITICAL | setup- |
| 3 | State Management | HIGH | state- |
| 4 | Server Integration | HIGH | server- |
| 5 | Performance Optimization | MEDIUM | perf- |
| 6 | History & Navigation | MEDIUM | history- |
| 7 | Debugging & Testing | LOW-MEDIUM | debug- |
| 8 | Advanced Patterns | LOW | advanced- |
Quick Reference
1. Parser Configuration (CRITICAL)
parser-use-typed-parsers- Use typed parsers for non-string valuesparser-with-default- Use withDefault for non-nullable stateparser-enum-validation- Use enum parsers for constrained valuesparser-array-format- Choose correct array parser formatparser-json-validation- Validate JSON parser inputparser-date-format- Select appropriate date parserparser-index-offset- Use parseAsIndex for 1-based URL displayparser-hex-colors- Use parseAsHex for color values
2. Adapter & Setup (CRITICAL)
setup-nuqs-adapter- Wrap app with NuqsAdaptersetup-use-client- Add 'use client' directive for hookssetup-import-server- Import server utilities from nuqs/serversetup-nextjs-version- Ensure compatible Next.js versionsetup-shared-parsers- Define shared parsers in dedicated file
3. State Management (HIGH)
state-use-query-states- Use useQueryStates for related parametersstate-functional-updates- Use functional updates for derived statestate-clear-with-null- Clear URL parameters with nullstate-controlled-inputs- Handle controlled input value properlystate-avoid-derived- Avoid derived state from URL parametersstate-options-inheritance- Use withOptions for parser-level configurationstate-setter-return- Use setter return value for URL access
4. Server Integration (HIGH)
server-search-params-cache- Use createSearchParamsCache for Server Componentsserver-shallow-false- Use shallow:false to trigger server re-rendersserver-use-transition- Integrate useTransition for loading statesserver-parse-before-get- Call parse() before get() in Server Componentsserver-share-parsers- Share parsers between client and serverserver-next15-async- Handle async searchParams in Next.js 15+
5. Performance Optimization (MEDIUM)
perf-throttle-updates- Throttle rapid URL updatesperf-clear-on-default- Use clearOnDefault for clean URLsperf-avoid-rerender- Memoize components using URL stateperf-serialize-utility- Use createSerializer for link URLsperf-debounce-search- Debounce search input before URL update
6. History & Navigation (MEDIUM)
history-push-navigation- Use history:push for navigation-like statehistory-replace-ephemeral- Use history:replace for ephemeral statehistory-scroll-behavior- Control scroll behavior on URL changeshistory-back-sync- Handle browser back/forward navigation
7. Debugging & Testing (LOW-MEDIUM)
debug-enable-logging- Enable debug logging for troubleshootingdebug-common-errors- Diagnose common nuqs errorsdebug-testing- Test components with URL state
8. Advanced Patterns (LOW)
advanced-custom-parsers- Create custom parsers for complex typesadvanced-url-keys- Use urlKeys for shorter URLsadvanced-eq-function- Implement eq function for object parsersadvanced-framework-adapters- Use framework-specific adapters
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Weekly Installs
3
Install
$ npx skills add pproenca/dot-skills --skill "nuqs"Repository
pproenca/dot-skillsInstalled on
claude-code3
kilo1
windsurf1
amp1
clawdbot1
opencode1