joonhocho commented 5 years ago

Feature request

On Reddit or twitter, if you click on a post, it will change url to post view url, but it shows post on modal instead of navigating and losing current ui contexts (scroll positions and such). I don't think this modern behavior is currently supported by Next.js

Describe the solution you'd like

Click on a list item to view list item content details.
Show item details on modal and change url
closing modal pops url
all previous ui contexts are preserved (scroll positions, etc.)
when user lands on the item detail url (initial load), it should show item detail page (not modal)

All modern websites implement this behavior for better viewing experience

joonhocho commented 5 years ago

There is an attempt by @singlepageprogrammer for this behavior: https://github.com/zeit/next.js/pull/7864 Problem is using window.history breaks Next router. Using Next router triggers a navigation.

lkbr commented 5 years ago

In theory it's as simple as "basically you don’t link to another page at all when you open the modal, you just display the modal on the current page and manually push a new history entry using Next’s router API." - https://mobile.twitter.com/adamwathan/status/1147593450734444547

But not sure how to do this in a Next.js ordained way.

bringking commented 5 years ago

To add some of our experience to this from Weedmaps. We ran into issues with Mobile Chrome and Mobile Safari and their attempts to cache resources when navigating back in the browser. So when pushing a route and opening a modal, X set of JS resources (page bundles, etc) have been loaded and executed. Then if you navigate away, then click "back" it attempts a full round trip to the Server, loads Y JS bundle for the full detail page, but also re-loads the old JS from the cache, and then the in-correct X bundle attempts to hydrate the page, and things break.

We tried a few tricks to prevent the browser from loading the cached resources, to no avail.

Our solution was to use a custom routing solution to ensure both routes loaded the same JS resources, but then bifurcated the rendering path based on URL

exogen commented 5 years ago

I think there's a simpler solution than what's been described above so far. I posted a quick half-baked demo of it here: https://github.com/exogen/next-modal-pages

This solution should definitely be improved upon, but the basic idea is sound:

In Next.js, routing to another page occurs by unmounting the previous page component and mounting the next one.
A custom <App> lets you decide exactly what to do with these page components. For example, you could wrap them in some layout or provider components in _app.js.
You also don't necessarily need to unmount the previous pages just because you're being given a new one in the App's latest render call. You could save a history of the previous page component/props and continue to render those if you want.
So, this page modal behavior can be accomplished by remembering a "stack" of previous page component/props passed to App, and rendering them as nested modals.

My demo does this in a somewhat janky way, but you get the idea. You don't need to mess with browser history or the DOM directly – Next.js and React already give you the pieces you need. From Next.js' perspective, you are still on the new page and rendering that page's component, it's just that the app has chosen to dynamically render other stuff around the current page as well – like the pages from past renders.

Edit: I've updated the demo with a cleaner implementation. :)

lkbr commented 5 years ago

In my case, I don't want or need to change anything but the browser's url.

mohammad-amin-hesam commented 5 years ago

https://github.com/mohammad-amin-hesam/react-modal-route-example

oyeanuj commented 4 years ago

@timneutkens Is there an official recommended/blessed way to do this, maybe like @exogen's example?

rahul3103 commented 4 years ago

I have found this but it asks for changes in next js module

https://github.com/tomevans18/nextagram

Any official recommended examples?

rahul3103 commented 4 years ago

https://codesandbox.io/s/ecstatic-buck-2t2tr

I am able to do this on / but on dynamic route its not possible.

adriangzz commented 4 years ago

Can confirm, changing if (!routeMatch) { to if (false) { in node_modules/next/dist/next-server/lib/router/router.js makes the use of model to dynamic pages possible. It works beautiful now.

FabianL1 commented 4 years ago

Is there already a good solution? I tried hashchange - but it does not work

mohammad-amin-hesam commented 4 years ago

https://github.com/mohammad-amin-hesam/react-modal-route-example

On Fri, 20 Mar 2020 at 16:02, FabianL1 notifications@github.com wrote:

Is there already a good solution? I tried hashchange - but it does not work

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zeit/next.js/issues/8023#issuecomment-601676415, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALEL5N5LBEHZWZLR42CH643RINO4JANCNFSM4IEWM7IQ .

viztor commented 4 years ago

This should be closed?

timneutkens commented 4 years ago

Landed #11473

makotot commented 4 years ago

Is there any way to show modal (not item detail page) when user lands on the item detail url (initial load) in opposition to the last step of described in https://github.com/zeit/next.js/issues/8023#issue-469543180 ? AFAIK, reddit behaves like this now.

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js

modal with url like reddit or twitter. changing url without navigation. #8023

Feature request

Describe the solution you'd like