Are there any good solutions for implementing stack navigation in Next.js?
Unanswered
Lagotto Romagnolo posted this in #help-forum
Lagotto RomagnoloOP
Hello.
I'm looking for robust page stack management solution with Next.js!
For example:
Page A → Page B → Page C
When I close Page C(or Modal C) or navigate back (using browser history),
I want to restore Page B’s state, including its scroll position and view.
Since Next.js has its own router lifecycle, I’m not sure how to achieve these requirements for apps using either the Next.js app router or page router.
Any suggestions or best practices would be greatly appreciated!
I'm looking for robust page stack management solution with Next.js!
For example:
Page A → Page B → Page C
When I close Page C(or Modal C) or navigate back (using browser history),
I want to restore Page B’s state, including its scroll position and view.
Since Next.js has its own router lifecycle, I’m not sure how to achieve these requirements for apps using either the Next.js app router or page router.
Any suggestions or best practices would be greatly appreciated!
1 Reply
Short mackerel
You can do that with intercepting and parallel routes.
So when you combine those two, you can creat something like this:
you are on page B and have different cards there that would open another page. When you click on a card, it will open a modal with the Page C in it.
The modal has already the url of the Page C, and you can share the url or even reload the page and it shows Page C in full view, not inside the modal.
If you close the modal of Page C, it goes back to Page B where it was, as long as you don’t reload the page.
So when you combine those two, you can creat something like this:
you are on page B and have different cards there that would open another page. When you click on a card, it will open a modal with the Page C in it.
The modal has already the url of the Page C, and you can share the url or even reload the page and it shows Page C in full view, not inside the modal.
If you close the modal of Page C, it goes back to Page B where it was, as long as you don’t reload the page.