If a route works when you click to it inside your app but returns a 404 after a browser refresh, check the Parallel Routes slots rendered by the affected layout. A hard navigation may not be able to restore an unmatched slot’s active subpage from the URL. Add a deliberate default.js or default.tsx fallback at the right route segment; use null for an intentionally empty slot or notFound() when the slot should produce a 404.
Why a refresh can behave differently from an in-app click
Parallel Routes let a layout render multiple named slots. A slot is represented by a folder such as @analytics, and its content is passed to the layout as a prop. The slot name is not part of the public URL: a /views route inside @analytics is reached at /views. The ordinary page content is also a slot, named children implicitly. Next.js Parallel Routes documentation describes this routing behavior.
As an Amazon Associate I earn from qualifying purchases.
On soft navigation, Next.js can render the changed route while retaining another slot’s active subpage, even if that subpage does not match the new URL. A browser refresh is a hard navigation: the URL alone may not tell Next.js which unmatched subpage had been active. It then tries to render that slot’s default.js; if no fallback exists, the unmatched route can produce a 404. This behavior prevents a slot from appearing at a URL where it was not intended to render.
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 matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11This difference is a useful diagnostic clue, not proof that a missing fallback is the cause of every refresh 404. Other routing or application errors can produce similar symptoms.
#1 Best Overall
How to find the slot that needs a fallback
- Compare navigation paths. Record the URL. Check whether it works through an in-app link but fails when entered directly or refreshed. That pattern is consistent with slot state not being recoverable on a hard navigation.
- Inspect the affected segment’s layout and route tree. List each named slot passed to the layout, then check whether a route in that slot matches the refreshed URL. Remember that
@slotis omitted from the URL. - Check the implicit
childrenslot too. It has no@childrendirectory, so inspect the parent route segment as well as folders such as@modalor@analytics. - Look for a fallback in each relevant slot. The fallback file belongs at the corresponding slot or parent segment. For example, the root segment’s implicit children fallback can be
app/default.tsx; a named slot can have its owndefault.tsxinside its@slotdirectory. Next.js documents the default.js convention and the missing required default.js error.
Choose what the fallback should render
A fallback is the intended behavior for an unmatched slot, not a universal way to suppress 404s.
| Fallback | When to use it | Example |
|---|---|---|
| Empty slot | The slot should render no content when it does not match the URL, as with an inactive modal slot. | export default function Default() { return null } |
| Not found | The unmatched state should deliberately remain a 404. | import { notFound } from 'next/navigation'; export default function Default() { notFound() } |
These examples use the App Router conventions; adapt the file extension and component typing to the project. The default.js documentation explains fallback files, while the missing-default guidance describes the required fallback behavior.
Rank #2
Account for the installed Next.js version
Check the project’s installed Next.js version before treating a missing fallback as a build requirement. The Next.js 16 upgrade guide says all parallel route slots now require explicit default.js files and builds fail without them. That is a version-specific requirement; do not assume the same build rule applies to an unidentified older version. See Upgrading to Version 16.
Retest direct loads, refreshes, and other slots
After adding the intended fallback, check the route both through in-app navigation and by direct URL load or refresh. Also confirm that each other slot in the layout displays its intended fallback rather than stale or unintended content.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.If the route opens a modal
Parallel Routes are commonly combined with Intercepting Routes for modal interfaces. A modal opened through in-context navigation can overlay the current page; a shareable URL or browser refresh should render the full page instead of intercepting it. If a modal seems to disappear on refresh, check both the intercepted route and its full-page counterpart before treating that behavior as a bug. See the official Intercepting Routes documentation.
Quick Recap
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.
