nuqs @nuqs47ng Twitter profile

Pinned Tweet

nuqs

11 days

📦 nuqs @2 .0.0 is out ! 🚀 ⚛️ Works with @nextjs 14 & 15, but also @reactjs , @remix_run , react-router, and more 🧪 Testable: unit-test your components in isolation 🪶 20% smaller bundle size Try it now: pnpm add nuqs @latest

nuqs 2 | nuqs

Opening up to other React frameworks

nuqs.47ng.com

23

59

731

Last Seen Profiles

@mconley11

@EuropeanLMS

@entamepost

@Morgan93291678

@VoicesOfIndy

@g54058787

@jaydog05142550

@CrystalSea26629

@hafeezhat

@FrancoisRahmani

@DoonTurki65811

@Ramnarayan077

@Kenia_Nass

@orhanayguler047

@I_AM_KooU

@abhinavmishra11

@Red13Flash

@pio_log

@Pritieminnie

@mhmd_alslw82390

@sakurada_poker

@bokeplokalmalam

@GamingRajo26

@nkysnkj

@ZHON6CL

@LockportTrackXC

@Setsuko37195970

@BLGadhveer

@chrisgarrit

@LloydandWhyte

@RihaFlower

@VmaniakJ

@maryellenonebay

@ryojilovebot

@note_hit

@bokeplokalmalam

nuqs

@nuqs47ng

1 month

Hello, @remix_run ! 👋

8

5

185

nuqs

@nuqs47ng

23 days

Crazy to think that this account is only two months old. Thanks everyone! 🙏 We're just getting started. 🚀

3

0

90

nuqs

@nuqs47ng

1 month

Fun fact: you can use the createSearchParamsCache feature of nuqs to parse and make dynamic segment slugs (route params) accessible to a page's RSC tree, without prop drilling, just like search params. Don't stop at the name: it will parse & cache any { [key]: string } object.

1

5

34

nuqs

@nuqs47ng

1 month

Follow along as @theorcdev refactors a @shadcn table to store filters & pagination in the URL with nuqs ⬇️

2

4

29

nuqs

@nuqs47ng

1 month

📦 nuqs @1 .19.3 is out! 🚀 - Supports Next.js 15's upcoming async searchParams page prop (introduced in latest @nextjs canary) - Makes the serializer base accept read-only searchParams from useSearchParams.

François Best - oss/?=&

@fortysevenfx

1 month

I love waking up to breaking changes in @nextjs core 🙃 This one is going to be a pain to handle properly in @nuqs47ng 😓

9

14

188

1

3

28

nuqs

@nuqs47ng

26 days

📦 nuqs @1 .20.0 is out! 🚀 - Remap useQueryStates keys: no more trade-off between shorter URLs & meaningful variables - Serializer gets support for `null` to clear all managed search params from the base (h/t @neefrehman_ ) 📥 pnpm add nuqs @latest

François Best - oss/?=&

@fortysevenfx

26 days

Coming soon to @nuqs47ng (like, tonight): `useQueryStates` gets a new option to rename keys. - Use variable names that make sense for your business logic - Remap them to a different search param key - Type-safe mapping, of course. Super handy for shortening URLs.

4

6

100

0

1

25

nuqs

@nuqs47ng

2 months

📦 nuqs @1 .19.0 is out! - useQueryStates gets some DX love - performance boost due to not running parsers when not needed - referential stability for object/arrays states Get it now:

1

2

17

nuqs

@nuqs47ng

1 month

never underestimate query strings.

1

10

nuqs

@nuqs47ng

14 days

@pontusab @NuQs @shadcn Being at the top of this list of all-star libraries is such an honour! 🤩🙌

0

9

nuqs

@nuqs47ng

3 months

👋 Hi there!

nuqs | Type-safe search params state management for React

Type-safe search params state management for React. Like useState, but stored in the URL query string.

nuqs.47ng.com

0

6

nuqs

@nuqs47ng

2 months

Look ma', no router!

François Best - oss/?=&

@fortysevenfx

2 months

Me, cooking: "What's your favourite ice cream flavour?" @nuqs47ng : "vanilla."

5

1

24

0

5

nuqs

@nuqs47ng

1 month

nuqs 🤝 T3 stack

Theo - t3.gg

@theo

1 month

@fortysevenfx @nuqs47ng You did! I’ll be implementing this on PicThing some time next week 🫡

1

0

5

0

5

nuqs

@nuqs47ng

1 month

@anthony_hagi @remix_run Probably react-router support, since the APIs are the same it should be straightforward.

1

0

4

nuqs

@nuqs47ng

1 month

@nikelsnik @victorbayas @nextjs Correct! Here is the preview running plain React alongside React Router:

François Best - oss/?=&

@fortysevenfx

1 month

Having a bit of fun: syncing the same React app with @nuqs47ng components, mounted twice. One with the vanilla React adapter, one through React Router. Even with "islands", everything is in sync, thanks to URL state.

1

19

1

0

4

nuqs

@nuqs47ng

29 days

Adapters are such a good idea that we will spend the rest of the decade continuing to explore its implications and applications.

François Best - oss/?=&

@fortysevenfx

29 days

A new React / RN framework, @one__js was released yesterday at @viteconf 🟡 I couldn't resist to try @nuqs47ng on it, with an adapter written in 10 minutes and 9 lines of code 🤯 Congrats on the launch @natebirdman , @jshez & @zetavg !

1

2

23

0

4

nuqs

@nuqs47ng

1 month

@YTCodeAntonio @fortysevenfx @nextjs @reactjs @vite_js @remix_run @vitest_dev Be mindful that URLs have a maximum size (up to 2048 characters is considered safe). Not every state belongs in the URL. To know if it does, this is a good starter:

Cory House

@housecor

5 months

There are over 30 different ways to handle React state. Here's how I decide.

35

158

1K

0

1

4

nuqs

@nuqs47ng

1 month

@yomaru_1999 @remix_run Very early preview (this will be shipped in v2):

0

4

nuqs

@nuqs47ng

1 month

@GreggLuskin For SSR, it would be great to give the cache feature a validation argument where you could feed a Zod schema (or its parse function to make it validation-lib agnostic). Would something like this work for you?

2

0

3

nuqs

@nuqs47ng

26 days

@jal_eelll @shadcn You might want to use a Date parser here: For an improvement over the stock ones, check out what @tremorlabs did on their demo page, with a single key providing two [start, end] dates. 🧑‍🍳💋 We'll add some of these common custom parsers to the docs soon!

Built-in parsers | nuqs

When using strings is not enough

nuqs.47ng.com

2

0

3

nuqs

@nuqs47ng

1 month

@_rayaanr @fortysevenfx Here's a basic example toggling a list of tags: Feel free to open a discussion in the repository if you have more questions!

1

0

2

nuqs

@nuqs47ng

2 months

. @fortysevenfx and I will be tuning in 👀

Next.js

@nextjs

2 months

Next.js Conf is here. Join us in SF or online Oct 24. • Sessions led by you (apply today) • Hands-on workshops led by Next.js experts • Meet and learn from the community Register now and apply to speak:

25

135

740

0

1

2

nuqs

@nuqs47ng

2 months

@ryo__kts そして、自分で手作りすることもできます！

0

1

2

nuqs

@nuqs47ng

1 month

@digitalconner @nikelsnik @nextjs You can't use Context on the server, it's a client-only feature. You could pass those props via Context to client components, but they already have access to it via useParams and useSearchParams. This cache pattern bridges the gap by acting like a server-side context.

1

0

2

nuqs

@nuqs47ng

11 days

📦 nuqs @2 .0.1 is out! 🚀 A couple of bug fixes after the big release: - Fix @nextjs pages router import (next/navigation.js) - Don't install all optionalDependencies (h/t @nezouse & @AlemTuzlak ) TIL: peerDependencies and peerDependenciesMeta.*.optional: true does the job.

1

4

87

nuqs

@nuqs47ng

1 month

@ty1erlaws0n It's using React's `cache` function (in beta but available in Next.js) internally. Credit for this pattern goes to @ericbureltech 🙌 Source here:

nuqs/packages/nuqs/src/cache.ts at next · 47ng/nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string. - 47ng/nuqs

github.com

0

2

nuqs

@nuqs47ng

12 days

@_MusKRii @justansub @fortysevenfx You'll want to set `shallow: false` to notify the server and re-render RSCs:

Options | nuqs

Configuring nuqs

nuqs.47ng.com

1

0

2

nuqs

@nuqs47ng

1 month

@kanateven @peer_rich There you go:

Utilities | nuqs

Utilities for working with query strings

nuqs.47ng.com

0

2

nuqs

@nuqs47ng

1 month

@GreggLuskin There's a discussion about Zod integration here: TL;DR: - Zod is great for validating deserialized state coming from search params. - nuqs provides parsers & associated serializers to convert state to/from query string values - Combining both is needed

[RFC] Zod integration · 47ng nuqs · Discussion #446

Draft PR: #448. There's been a few requests for using Zod to validate parsed search params, both on the server and on the client. This makes a lot of sense since: Only basic validation is curre...

github.com

1

0

2

nuqs

@nuqs47ng

1 month

@jal_eelll @shadcn The searchParamsCache won't work on client components, you'll need to split your definition this way: export const searchParamsParsers = { ... } export const searchParamsCache = createSearchParamsCache(searchParamsParsers) Then in your client component, use searchParamsParsers.

1

0

1

nuqs

@nuqs47ng

2 months

@MarkLyck @nikelsnik @nextjs

0

1

nuqs

@nuqs47ng

2 months

@tibotiber @mxkaske Next.js only (for now, stay tuned 👀)

0

1

nuqs

@nuqs47ng

22 days

@mohamedzamakhan Support for other React frameworks is coming in v2 !

feat: Introducing adapters for other frameworks by franky47 · Pull Request #644 · 47ng/nuqs

Tasks Add docs on adapters in Fumadocs Add/update docs on testing showcasing the NuqsTestingAdapter Add docs on adapters in the readme Update migration docs Expose adapters API for users to c...

github.com

0

1

nuqs

@nuqs47ng

1 month

@sudo_kw Thanks! 🙏

0

1

nuqs

@nuqs47ng

2 months

@infodusha @nikelsnik @nextjs Unfortunately Zod doesn't provide the serialisation needed when updating the URL. For simple types, the built-in `toString` might be enough. Parsing a boolean also needs preprocessing in Zod, otherwise the string `"false"` being a truthy value returns `true` as a boolean.

0

1

nuqs

@nuqs47ng

1 month

Watch it here:

Easiest way to filter data in Next.js (Drizzle, Shadcn, Nuqs)

Looking for the easiest way to search data in Next.js? Watch this video to learn how to use Drizzle, Shadcn, and Nuqs with search params for seamless data re...

www.youtube.com

0

1

nuqs

@nuqs47ng

2 months

@itsarminbabaei @pontusab To construct a URL with serialised params (the same way the hooks do), you can use the serializer helper:

Utilities | nuqs

Utilities for working with query strings

nuqs.47ng.com

1

0

1

nuqs

@nuqs47ng

27 days

@t3dotgg @rauchg @nextjs Make it three.

0

1

nuqs

@nuqs47ng

28 days

@GreggLuskin To be fair, the pattern could be adapted to be completely agnostic of nuqs, and be shipped in a separate package. That would allow it to work for params, search params and any Record<string, string> type.

0

1

nuqs

@nuqs47ng

2 months

@nikelsnik Tip: don't forget the `as const` after the literal option arrays. Otherwise it broadens the type to `string` or `number`, rather than `"graphite" | "sage"` or `2 | 4 | 6`.

1

0

1