NextJS: Add state to URL query params
I lovehate putting state in the url. You can create complex wizards or flows with a shareable url-state which you can store or send to a team. All without even having a backend or a login.
yarn add next-usequerystate
The long story
Check out how the URL changes based on your answers at ihasabucket.it.
There’s many reasons for putting the state in the URL:
- You can share the results to your team, or store them for later.
- When helping someone out you can link them a prefilled form, saying “I think this is right for you”.
- There’s no backend to implement.
- Loading data from the browser is faster than from an API.
- Error logging to a third party service like Sentry, includes the state in which the error occured.
There are a few things to get correctly and watch out for, though:
- You can quickly end up in a rerender loop as you write to and read from the history api.
- Avoid poor performance by updating the URL query async from the state changes.
- You want to consider using replaceState over pushState – but not always.
- Make your data URL safe before updating history.
- If you store JSON, you may want to base64 encode it or compress it.
- If you store JSON, your application should handle old (now invalid) data structures.
- With NextJS, do not call
router.pushtwice in one function. The latter change will override the first.
- With NextJS (SSR/SSG), do not rely on
router.queryto provide a variables initial value. Instead, update the variable with
useMemo(due to how rehydration).
Below are my attempts at getting around these things. For the future, I’d recommend using next-usequerystate to handle the complexity.
- (Simple) Gist for storing string variables in URL
- (Harder) Gist for storing JSON state in URL
There is one gotcha: You can not call two different
setQueryState functions in the same render.
The latter will override changes to the query params done by the former.
Previous post Passbolt on AWS
Next Post How to load web fonts quickly