iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If a Next.js route works after an in-app click but returns a 404 when you refresh or open its URL directly, inspect the affected Parallel Routes slots for a missing default.js or default.tsx. A hard navigation cannot always recover the active subpage for an unmatched slot from the URL. Add a fallback that matches what that slot should do: render nothing with null, or show a 404 with notFound(). The exact requirement depends on your Next.js version; Next.js 16 requires an explicit fallback for every parallel route slot.
Why a route can work in-app but fail on refresh
Parallel Routes let a shared layout render multiple pieces of a page through named slots. Each slot is represented by a folder such as @analytics; its content is passed to the layout as a prop. The slot name is not part of the public URL, so a route inside @analytics at /views is reached at /views. The ordinary page content is the implicit children slot.
Next.js handles soft navigation and a full-page load differently. During in-app navigation, it can update one route while retaining another slot’s active subpage, even when that subpage does not match the new URL. On refresh or direct entry, Next.js cannot reconstruct that unmatched slot’s active state from the URL. It looks for the slot’s default.js fallback; if one is absent, the unmatched route can produce a 404. This is intentional protection against displaying a parallel route at a URL where it does not belong. Next.js documents this behavior for Parallel Routes.
Recommended Free Tools
How to diagnose and fix the 404
- Confirm the navigation difference. Note the exact URL and check whether it works through in-app navigation but fails after refresh or direct entry. This pattern is consistent with Parallel Routes state recovery, but does not prove that a missing fallback is the cause.
- Inspect the affected segment’s layout and slots. Identify every named
@slotpassed to the layout, then check whether each has a route matching the refreshed URL. Also account for the implicitchildrenslot; it does not have an@childrenfolder. - Add a fallback at the right segment. Create
default.jsordefault.tsxinside each slot that needs fallback behavior. For the implicitchildrenslot, put the fallback at its corresponding parent segment—for example,app/default.tsxfor the root segment. See the Next.jsdefault.jsconvention and its Missing Required default.js error guidance. - Choose what the fallback means. Return
nullwhen an unmatched slot should render no content, as is common for an inactive modal slot. CallnotFound()when a 404 is the intended result. A fallback should express the intended behavior, not merely suppress every 404. - Check the installed Next.js version. The Next.js 16 upgrade guide says every parallel route slot requires an explicit
default.jsfile and builds fail without them. Treat that as a Next.js 16 requirement; do not assume it applies identically to an unidentified older version. - Retest both paths. Verify in-app navigation, then load the URL directly or refresh it. Confirm that the other slots render their intended fallbacks as well.
Choose the fallback that matches the slot
| Fallback | What it does | Use it when |
|---|---|---|
return null |
Renders no content in that slot. | The slot should be empty when no route matches, such as an inactive modal slot. |
notFound() |
Triggers the not-found behavior. | A missing route in that slot should intentionally produce a 404. |
The default.js documentation describes fallback behavior, while the missing-default guidance covers the required fallback error.
#1 Best Overall
If the affected route opens a modal
Parallel Routes are often combined with Intercepting Routes to show a modal over the current page during in-context navigation. A shareable URL or browser refresh should instead render the full page, not intercept the route as a modal. Check both the intercepted route and its full-page counterpart before treating a modal that changes or disappears on refresh as a bug. The Next.js Intercepting Routes documentation explains this distinction.
Quick Recap
Rank #2
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.
