NextJS App Router - Soft Navigation
Unanswered
Philippine Crocodile posted this in #help-forum
Philippine CrocodileOP
Hello. I cannot get soft navigation to work between page transitions in NextJS App Router and the <Link/> component. I am needing help understanding / implementing / reproducing a minimal example, which I have here, of the expected behaviour without a full page refresh
https://github.com/vercel/next.js/issues/59981
Joulev and Alfonsus in the general chat has been able to get the expected behaviour from the same reproduction repositority, but I still cannot get it to work as expected. I have attempted via dev, prod locally, as well as on codespaces, on multiple browsers of Chrome, Safari, and Arc
https://github.com/vercel/next.js/issues/59981
Joulev and Alfonsus in the general chat has been able to get the expected behaviour from the same reproduction repositority, but I still cannot get it to work as expected. I have attempted via dev, prod locally, as well as on codespaces, on multiple browsers of Chrome, Safari, and Arc
17 Replies
can you send a video of what you did? and how it looked like in your computer?
perhaps a screen recording is needed
Let me know if there's anything else that would be helpful for me to share 🙂
you changed the background color on <main>
<main> is in [[...slug]]/page.tsx
when traveling from /link-1 to /link-2,
page content of link-1 is swapped with page content of link-2
this is expected because going from /link-1 to /link-2 have different page component
your layout.tsx however, still is the same since it is located as
/ therefore it does not get rerendered.I changed the background on <body> and it gets persisted between link-1 and link-2
Therefore the solution is:
If you want to persists state in between navigation, put stuff in a common layout.tsx.
If you want to persists state in between navigation, put stuff in a common layout.tsx.
Additional Solution: This is why state management library like RQ and zustands still works in Next.js.
Philippine CrocodileOP
I tried on <body> as well and it does not persist. And it still does the hard page refresh
Philippine CrocodileOP