Refresh fallback
A page refreshes while a parallel-route slot points to a subpage whose active state cannot be reconstructed.
Next.js 16+ · Directive
default
The default.js convention defines fallback UI for Parallel Routes when Next.js cannot recover a slot's active state after a full-page load. Add a default file to named slots, and sometimes to the implicit children slot, to prevent errors or a 404.
How it works
Place a default.js or default.tsx file inside a parallel-route slot to provide fallback UI when Next.js cannot recover that slot's active state during a hard navigation. Named slots need their own fallback; the implicit children slot may need one too to avoid a 404.
Syntax
app/[segment]/@slot/default.tsxKey points
- Use default.js or default.tsx to render fallback content inside a parallel-route slot.
- The fallback is used after a hard navigation when the slot's previous active state is unavailable.
- A default file supplies UI for a slot when the current URL does not match its previously active subpage.
- Treat children as a slot too; create a fallback there when the route requires one.
Common mistakes
- Named parallel-route slots require a default file when their active state cannot be recovered.
- The implicit children slot also needs a default file when recovery is not possible.
Example: default.tsx fallback
export default function Default() {
return <p>Select a section to continue.</p>
}A fallback UI rendered when a parallel-route slot's active state cannot be recovered after a full-page load.
When to use it
Named-slot recovery
A named slot such as @analytics or @team has no URL-matching active child after a hard navigation.
Children-slot fallback
The implicit children slot must render a route fallback instead of producing a 404.
Related
Parallel Routeschildren slotnamed slotshard navigation