syncing state to url search params | Next.js | Page 1

#

I am trying to sync some page state to the URL's search params using a combination of window.history.replaceState and the query-string package for serialization and deserialization.

However I'm finding that this only seems to partially work and messing around with the history stack seems to break a lot of navigation - back/forward events seem to break completely and the state of the url and the application go out of sync. You have to go "back" repeatedly until the view changes. I suspect that by trying to interact with the history stack directly I'm breaking something internal to next.

Does anyone have some kosher recommendations for syncing state to search params that don't seem to break nextjs routing?

#

The basic use case is users want to be able to share filter combinations for a list of results by copy and pasting the URL

#

fairly basically stuff like ?page=1&job_type=repair

#

haven't found anything specific in nextjs docs to do with search params

#

I'm guessing I have to use useRouter - which is frustrating because the code that manages state is not a component and constructs itself in the module scope as a static export

#

figured it out, next/router exports a singleton instance of the router

#

I don't actually need to use useRouter to get access to an instance

#syncing state to url search params