URL hash for state unpredictable in app and page dir

[lloydrichards]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:58 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6020
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.4.0
    Relevant packages:
      next: 13.4.2-canary.0
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/lloydrichards/DeepLinks-in-Nextjs

To Reproduce

1. Run repo in dev or use preview site
2. Add a name and a tag
3. See the tag update in the NavBar as well as in the URL
4. Navigate to the Post link
5. See name and tag are found in state, but tag is not in URL
6. navigate to the Post: Sport link
7. See name and tag are found as before in state, but tag in the url is different
8. navigate to the Post: [ tag ] link
9. See name and tag are found as before in state, and tag in url is correct
10. navigate to the `Post (pages): [ tag ]
11. See name and tag are not found in state, url hash is now missing
12. navigate back to the Post: [ tag ] link
13. See name is not found and tag is now replaces with "null"
14. Copy and paste the url and replace the "null" with another string into another window
15. See that the new string is not shown as the tag

Describe the Bug

Have been trying to use Jotai to reproduce deeplink states in the URL so the configuration of a dashboard can be shared via URL. This was working previously in Next12 and documented in Jotai by tapping into the Router.on() events to sync the state of the atoms with the router.

In 13 this was broken and up until recently I've been waiting for the feature related to hashes in the App Dir Roadmap. With 13.4 there were some improvements to how the hash was loaded using just the atomWithHash() but after some experimenting have found even weirder behaviour when mixing the app and pages directory and trying to create hash states.

In the minimal repo, you can try add a nameAtom (which is held in global state) and a tag which uses the hash and then navigate between the pages. You will see that sometimes the tag is added to the hash, something the hash is replaced manually but the pervious value is found by the atom, and sometimes it is removed all together.

Expected Behavior

For the tag: I would expect that whatever the tag is set as in the url, that this is represented as the value on the page after navigation or page load.

For the name: I would expect the name value to be stored as state across the app and pages directory. And even if the state is lost when navigating to the pages directory, at least when going back to the app directory that the state is restored

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

[lloydrichards]

Since v13.4.5 some of the issues seem to have been solved with:

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

There are still some very odd behaviours relating to swapping between the app and pages directory, but i'll leave those here for someone else who might have the same issue 🤷