nuqs vs TanStack Router
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A React hook that keeps component state in the URL query string, like useState but in the address bar.
Open source · MIT
A type-safe router for React and other web UIs, with an optional full-stack framework built on it.
The short answer
Choose nuqs if you need…
- React developers building filterable, searchable or paginated pages
- Teams using Next.js (app or pages router) who want type-safe search params
- Apps where users should be able to bookmark or share a view's state
- Projects already on React Router v6+/v7/v8 or Remix who need URL-synced state
Choose TanStack Router if you need…
- React developers who want type-checked routes and URL parameters
- Teams building single-page apps that need schema-validated search params
- Developers who want to add server rendering later via TanStack Start
Side-by-side
| nuqs | TanStack Router | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 10.9k | 15.3k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | TypeScript |
| Last code update | 4 days ago | 4 days ago |
What each one is
nuqs
nuqs is a TypeScript library for React apps that stores state in the URL's query string instead of in memory. You use it much like React's useState: you get a value and a setter, but the value appears in the address (for example ?name=foo), so it survives page reloads and can be shared as a link. It provides adapters for Next.js, plain React, Remix, React Router and TanStack Router.
TanStack Router
TanStack Router is a routing library for web apps that aims to make navigation, URL parameters, and search parameters type-safe, so mistakes are caught by TypeScript. It also includes built-in caching, prefetching, nested layouts, and error boundaries. TanStack Start is a separate full-stack framework built on Router that adds server rendering and streaming, according to the README.
Best for
nuqs
- React developers building filterable, searchable or paginated pages
- Teams using Next.js (app or pages router) who want type-safe search params
- Apps where users should be able to bookmark or share a view's state
- Projects already on React Router v6+/v7/v8 or Remix who need URL-synced state
TanStack Router
- React developers who want type-checked routes and URL parameters
- Teams building single-page apps that need schema-validated search params
- Developers who want to add server rendering later via TanStack Start
Strengths
nuqs
- Simple model: the URL becomes the source of truth for the state
- Built-in parsers for types such as integers, floats, booleans and Dates, plus support for custom parsers
- Supports several frameworks and routers through adapters, with an MIT license
TanStack Router
- Strong end-to-end type safety for routes, params, and loaders, per the README
- Schema-driven search params with validation
- Open source under the MIT license with an active project and a documented site
Not ideal for
nuqs
- Projects that do not use React or a supported framework, since the library and adapters are React-specific
- Sensitive data, because anything stored in the query string is visible in the URL and browser history
- Projects on Next.js older than 14.2 without pinning to nuqs v1, as the README says the adapter code needs 14.2 or later
TanStack Router
- Non-developers, since it is a code library rather than an end-user tool
- Projects not using TypeScript or JavaScript, since the README centers on those languages
- Those who want a minimal router without a larger ecosystem, as the README pitches a family of related TanStack packages
Trade-offs
nuqs
- Only works in client components in Next.js, and the README notes TanStack Router support is experimental and does not cover TanStack Start
- Values in the URL are visible and user-editable, so it is unsuitable for secrets
- Requires wrapping your app in a framework-specific adapter, which adds setup that differs by router
TanStack Router
- The README is truncated and gives few concrete setup details, so the full learning curve is unclear from it
- Start, the full-stack part, is a separate layer whose maturity this README does not detail
- Relies on the TypeScript ecosystem, which adds setup for those not already using it
Getting started
nuqs
Install with npm
npm install nuqsInstall with pnpm
pnpm add nuqsTanStack Router
Clone the repository
git clone https://github.com/TanStack/routerFrequently asked questions
What is the difference between nuqs and TanStack Router?
nuqs: A React hook that keeps component state in the URL query string, like useState but in the address bar. TanStack Router: A type-safe router for React and other web UIs, with an optional full-stack framework built on it. nuqs suits react developers building filterable, searchable or paginated pages, while TanStack Router suits react developers who want type-checked routes and url parameters.
Are nuqs and TanStack Router free?
nuqs: Free and open source. TanStack Router: Free and open source.
Which is easier to set up, nuqs or TanStack Router?
nuqs is easier to get started with (rated beginner); TanStack Router is rated intermediate and usually needs more setup.
Is nuqs or TanStack Router more popular?
TanStack Router has more GitHub stars (15.3k) than nuqs (10.9k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to nuqs and TanStack Router?
Other options people compare them with include Zustand, Kysely, React Router, Next.js, TanStack Query.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.