Creating Deep Links in NextJS using Next/Router

[lloydrichards]

👋 Hello!

Im in the process of learning Jotai and having some issues when trying to intergrate the atomWithHash() with Next/Router in order to create Deep Links and be able to save and share configurations between users via URL.

I've created a simple repo for testings and have noticed that the state of the page is not loaded correctly on initial load when passing hash values through the Link components.

To Recreate

1. Clone the repo
2. Run yarn dev
3. Go to https:localhost:3000
4. Enter a name and see it displayed in the url hash and on the page. 👍
5. Copy the URL and paste into a new browser and see the same page. 👍
6. Click on the Nav link to About (localhost:3000/about)
7. Interact with switch and see the same state saved in url 👍
8. Click on the nav link to About:Sports (localhost:3000/about#topic="sports")
9. See the page not react 👎
10. Copy the URL and paste into browser to see the correct loading of the topic data 👍

Questions

• Is there a way for the Next/Router to correctly load atomWithHash?
• Does it require additional setup such as the atomWithHashSync() from src/utils/atoms.ts
• How to remove the %22 when passing strings to the hash?

[t6adev]

I created the codesandbox project by the repo, here
Let's start with it and I add "another page".

[lloydrichards]

Have added a PR (#1865) to update the docs with a caution about NextJS routing as well as links to the roadmap where you can check on the status of the router hash handling and events Intercepting

[lloydrichards]

I was checking is this was still an issue with the release of Next 13.4 and it seems like you no longer need to use the atomWithHasSync() to get hash atoms working 🎉 I've updated the repo i've linked above to the latest and things seem to be working as expected. Might make another PR later this week to update the docs if you'd like

[dai-shi]

Yes, please.

[lloydrichards]

I spoke too soon 😮‍💨 I wanted to double double check and found that there are now even weirder behaviours when it comes to moving between app and pages directory as well as when moving between routes using atomWithHash and atom. Have posted an issue with Next here as i think this is much more of a next router issue then Jotai, but if this reaches any conclusions i'll be sure to update the docs with what works in next 12 and 13

[lloydrichards]

i hold my breath but I think the latest minor release of Next13 (v13.4.5) may have fixed the issue 🤞

App Router: fix relative query/hash handling in next/link and router push/replace: vercel/next.js#49521

This seems to be the change that has helped with hash syncs and so far i've updated the minimal repo and things look promising. Will try next week to build some url states on a side project and if things go well then i'll update the documentation for you