Parallel and intercepting routes: render any route within a modal?

[abergenw]

Seems like parallel + intercepting routes is not designed for this, but I wonder if it's possible to use these concepts to render any given route in a modal on top of the current route?

What I have in mind:

• Allow the call site to determine whether the route should open in a modal or not (the <Link>)
• Make layouts (and page) context-aware so that they may opt-in/out of rendering certain parts depending on context
• Similarly, <Link> should be context-aware and probably default to opening routes within the same context (modal), allowing e.g. a layout with a navbar to work automatically in a modal
• Use normal route URLs so that a page reload would open the route as a regular page

[noahgsolomon]

Are you saying using Link it should not default always to only opening the modal?

If you're asking about how to have a modal open if it isn't a hard reload though, otherwise open the non-intercepting parallel route here is how I do it.

import Modal from "./components/Modal";

const Layout = ({ children }: { children: React.ReactNode }) => {
  return <Modal>{children}</Modal>;
};

export default Layout;

Also, a suggestion for this. Add as a search query param the page you are coming from. Because if the user is on for example /dashboard, and they open the parallel intercepting route which opens the modal, if they refresh the page, it will route them to the actual route, but if you don't want to allow /dashboard -> actual route (non-modal route), you can check the query string params in the actual routes component to redirect to dashboard.

And oppositely, the work around for not opening the modal for a soft navigation like using you can add to the link the query string param of where you're coming from checking for its value and redirecting based on it in the parallel route component.

[abergenw]

Thanks for your reply!

The scenario you are describing seems to be the standard use case, you define:

1. The route you want to intercept and where the interception should occur: (.)chat
2. What you want to render (in parallel) when intercepting that route: (.)chat/page.tsx

What I'm looking for is the ability to render any existing route as a parallel route (in a modal), without explicitly having to define the interception for every single route. If you could pass the target slot to <Link> (e.g. @modal or @children) you wouldn't need to define (1) nor (2) above as long as you're ok with the full route being rendered inside the modal.

[abergenw]

For anyone interested, I have a solution for my use case. It is somewhat involved and requires (minor) patching of Nextjs. The basic idea:

1. Make Nextjs support conditional interception
   a. Requires patching, interception occurs if ?overlay query param is present
2. Codegen parallel+interception routes (files) at the desired level in your route tree
3. Create wrapper implementations of useParams(), usePathname() and useSearchParams() which "freeze" the value when called from the underlying route while an intercepted overlay is shown
   a. Without this, the underlying route would potentially update while in overlay mode
4. Create wrapper implementations of useRouter() and <Link> which keep appending ?overlay to links when rendered within an overlay
   a. This way, we stay within the modal unless explicitly opting out in the link

This seems to work well but of course I'm not happy having to patch Nextjs. Another downside is also codegenerating these mirrored interception routes as it leads to duplicated js bundles getting served.

I'd appreciate if anyone from the Next team would like to give their thoughts! @timneutkens or maybe @ztanner seems to be quite involved in these routing concepts.

[khuezy]

There's a related discussion here: #49146. Would prefer not to have the overlay query but beggars can't be choosers.

[amlcodes]

I'm having trouble understanding the parallel and intercepting routes.
I have a home page which is displaying the modal on product click.
on my Product Page, I have a Product Variant Picker component. it pushes a new route to the router when clicked. The route is the same domain and route, but new search parameters.

How do I not show the modal?

[programming-with-ia]

feature needed