I have the following problem.

In our Next.JS project we have 3 pages:

/documents => shows all documents /document/[id]/index.js => shows document page /document/[id]/edit.js=> shows document edit page

Quite simple so far. On all these page we use an useDocument hook with router.query.id | props.id (from getServerSideProps) which loads the document with SWR.

This generally works without problems. But when i open a document page, then go back to the documents list and then try to open a different document in the edit page it correctly shows the browser url with /edit in the end, but somehow shows the document view page and not the edit page. When i refresh, everything works fine and the edit page is opened. This only happens in production mode and i cannot recreate it locally which is very annoying. In addition, which is very strange, it does not happen, when i open the react dev tools^^

What i found out so far is that sometimes the props.id is still the id of the last document and the router.query.id contains the new document. But still the old document is not shown anymore, but the new one on the wrong page. I also try to switch to always load the document with the router.query.id but that didn't work either.

What i found is that Next.JS has some issues with not refreshing state when switching dynamic pages, but that didn't helped me so far.

Does anyone experienced something similar?