In building a modal with parrellel and intercepting routing, on refresh you’ll have to create another main route so the modals when it hits the children slot it can find the route to rely on and it loses the prior context from which the modal route was displayed, being the children slot. The suggestion is to create a a linear structure, in that on browser refresh the modal slot will be preserved and also the children slot; which is preserving the context, and a fallback route if there’s no context in cases of a direct navigation to the modal route
I wasn’t sure if this was a question, so let me know if you have any specific questions.
You’re running into a pretty common issue when using modals with Next.js parallel and intercepting routes.
When you refresh the page, the intercepted route loses context because Next.js doesn’t know which page should be rendered behind the modal. To fix this, you’ll need to define both an intercepted route and a regular route. The intercepted route handles navigation within the app, while the regular route is used when someone accesses the page directly or refreshes it.
A typical file structure might look like this:
app/
├── @modal/
│ ├── (.)photo/
│ │ └── [id]/
│ │ └── page.tsx // Intercepted modal
│ └── default.tsx // Empty slot fallback
├── photo/
│ └── [id]/
│ └── page.tsx // Full-page version
├── page.tsx // Main page
└── layout.tsx // Contains @modal slot
In this setup, you can use the same component for both routes to keep the UI consistent. The intercepted version will show the modal overlay, while the regular route displays the full-page view. Adding a default.tsx file in your @modal folder that returns null ensures you have a clean empty state when no modal is open. This approach allows your modal to work seamlessly whether users navigate within the app or land directly on the URL after a refresh.
For more detail, check out the official docs on Parallel Routes and Intercepting Routes.