A modal route should have two valid presentations: a contextual modal when reached through in-app navigation, and a normal page when someone opens its URL directly or refreshes. The failure usually comes from treating the modal presentation as the route itself. Next.js can preserve parallel-slot state during a soft navigation, but a full-page load must recover the route without that earlier client state.
Why a refresh changes what Next.js can render
In the App Router, an intercepted route lets a destination appear in context—for example, a photo displayed in a modal over a gallery. During client-side, or soft, navigation, Next.js can retain the active subpage in parallel route slots. The URL changes, but the app can preserve the surrounding page.
As an Amazon Associate I earn from qualifying purchases.
A refresh or direct URL visit is a hard navigation: the browser loads the URL as a new page. Next.js cannot infer the active state of unmatched parallel slots from the previous client session. The contextual modal is therefore not a substitute for a regular page at that URL. The intended pattern is a modal during in-app navigation and a standalone page on direct access or refresh, as shown in the Next.js Intercepting Routes documentation.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallGive the URL a normal page as well as a modal presentation
Keep a canonical page route for the content, then use an intercepted route to render that same destination in context when navigation originates inside the app. In the official photo example, clicking a photo in the gallery opens a modal; following its shareable URL or refreshing renders the full photo page.
#1 Best Overall
This distinction makes the route usable beyond the original interaction. A user can share the URL, bookmark it, or arrive from another site without depending on a gallery page that may not exist in the current navigation state.
Add fallbacks for unmatched parallel slots
At the relevant layout level, inspect every parallel route slot. On a hard navigation, a slot may not match the URL, so Next.js needs a fallback. Add a default.js file for each slot that can be unmatched. The fallback should reflect the intended experience: return null when the slot should be empty, or use a not-found response when an unmatched slot should remain a 404. The Parallel Routes documentation describes slot state and fallbacks; the default.js reference covers the fallback convention.
Rank #2
Remember that the implicit children slot can also need a default.js. If Next.js cannot recover its parent page state on a hard navigation, a missing fallback there may be the problem even when the named modal slot has one. See the Missing Required default.js for Parallel Route guidance.
Check the interceptor against URL segments, not folder depth
Interception markers are counted against URL route segments. A parallel slot folder such as @modal does not add a segment to that count, even though it appears in the filesystem.
| Matcher | Meaning |
|---|---|
(.) |
Intercept at the same route-segment level |
(..) |
Intercept one route segment up |
(..)(..) |
Intercept two route segments up |
(...) |
Intercept from the app root |
Count URL segments in the route hierarchy and ignore @slot folders. The matcher definitions and examples are in the Intercepting Routes reference.
Quick Recap
Rank #4
Troubleshoot the failure in this order
- Test a fresh load. Open the failing URL in a new tab, then refresh it. Decide whether the expected result is a standalone page or a modal over a meaningful base page. The documented photo pattern uses the standalone page for direct access and refresh.
- Confirm both route presentations exist. Verify that the URL has a normal page route as well as the intercepted route used for contextual navigation.
- Audit fallbacks at the layout level. Check every potentially unmatched parallel slot, including
children. Adddefault.jswhere needed, and choosenullor not-found behavior according to the intended UX. - Recount the matcher. Count URL route segments rather than filesystem folders, and do not count
@modalor another slot folder as a segment. - Test browser history separately. Use back to close the modal and forward to reopen it, then test refresh independently. Back/forward navigation and a new full-page load do not have the same slot-state recovery conditions.
- If the structure matches the documented pattern, collect specifics. Record the folder tree, exact Next.js version, failing URL, runtime or build error, and deployment environment before attributing the problem to a version issue, deployment setting, or cache behavior.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
