Type-safe URL state in with nuqs
summary
nuqs is a library that treats the URL as a type-safe search params store for Next.js and other React frameworks, claiming 1M weekly downloads and adoption at Sentry, Supabase and Vercel. It provides adapters for the Next app router, declarative parsers/serializers, server-side loaders, and typed link generators; demos show a counter that teleports state between tabs and an album filter that uses time safety (throttle/debounce + startTransition) to avoid one-request-per-keystroke while still performing SSR when shallow routing is disabled.
AI-written summary · about
chapters (12)
- 0:00Introduction to nuqs
- 0:36Benefits of URL state
- 1:48URL as communication link
- 2:55Drawbacks and pitfalls
- 6:41Nuqs declarative approach
- 8:18Demo: Basic counter
- 10:34Router and History APIs
- 11:34Demo: Data fetching and SSR
- 15:37Optimizing URL updates
- 20:16Type-safe links
- 22:40URL key remapping
- 24:00Recap and conclusion
related talks
31mType Safe URL State Management in React with nuqs
07mURL: your state management solution for Next.js 14
30mTypesafe state in your URL
31mType-Safe URLs
29mEfficient server state management
21mUsing Next.JS and Redux for Epic Noscript Web Apps
31mCommon Mistakes in Vue and Nuxt and How to Avoid Them
24mGoodbye, useState