What is the purpose of the default.jsx file in parallel routes? What happens without it?

Question

Accepted Answer

In Next.js parallel routes, `default.js` (or `.jsx`/`.tsx`) serves as a critical fallback mechanism for handling hard navigations—specifically full-page reloads or direct URL access [citation:2][citation:3]. Its purpose stems from how Next.js manages slot state: during client-side navigation (soft navigation), Next.js tracks each slot's active subpage and preserves it. However, on a full-page reload, the framework cannot recover this state for slots that don't have a matching page at the current URL. The `default.js` file provides a fallback UI for exactly these scenarios [citation:1][citation:5]. Consider a folder structure where a `@team` slot has a `/settings` page but the `@analytics` slot does not. When a user navigates to `/settings` via client-side navigation, the `@team` slot correctly renders its settings page while the `@analytics` slot maintains its previously active page [citation:1][citation:3]. If the user refreshes the browser (hard navigation), Next.js loses the knowledge of what was active in `@analytics`. Without a `default.js` file, it has no instructions for what to render in that slot, leading to a 404 error [citation:1][citation:5]. This applies to all named slots, and importantly, to the implicit `children` slot as well [citation:2][citation:7]. Consider this folder structure: ``` app/ ├── layout.js ├── page.js ├── @team/ │ └── settings/ │ └── page.js └── @analytics/ └── page.js ``` When navigating to `/settings` (via client navigation), `@team` renders its settings page, and `@analytics` continues showing its page. On page refresh, `@analytics` has no matching page at `/settings`, so Next.js looks for `app/@analytics/default.js` as a fallback. Without it, you get a 404. Similarly, the root `page.js` renders the `children` slot at `/`, but after refresh at `/settings`, you also need `app/default.js` to tell Next.js what to render in the children slot [citation:6]. In Next.js 15 and earlier: Missing `default.js` results in a 404 error for the unmatched slot during hard navigation, leading to confusing UI states where slots unexpectedly show 404 pages [citation:1][citation:3][citation:6]. In Next.js 16 (upcoming): Starting with version 16, this requirement becomes stricter. The build will fail entirely if any parallel route slot (except the implicit children slot) lacks a `default.js` file. This change adds build-time validation to catch configuration errors before deployment [citation:9]. The children slot (implicit) also needs a root `default.js` file. Without it, navigating to routes without a matching page in the children slot will result in a 404 [citation:2][citation:6]. Without `default.js`, patterns like modals with intercepted routes break on page refresh—the modal content disappears and shows 404 instead of gracefully reverting to the regular page [citation:1]. // Simple empty slot (render nothing) export default function Default() { return null; } // Preserve 404 behavior (useful for migration) import { notFound } from 'next/navigation'; export default function Default() { notFound(); } // Access route parameters (e.g., in [artist]/@sidebar/default.tsx) export default async function Default({ params }: { params: Promise<{ artist: string }> }) { const artist = (await params).artist; return

Fallback for {artist}

; } [citation:2][citation:6][citation:7] The `children` prop is an implicit slot, treated exactly like named slots [citation:1][citation:5]. This means you also need a root `default.js` file (at the same level as your layout) to provide a fallback for the children slot during hard navigation [citation:2][citation:6]. Without it, navigating to a route that doesn't have a matching page in the children slot will result in a 404 on refresh. This is a common oversight when implementing parallel routes with intercepting patterns like modals [citation:1].

What is the purpose of the default.jsx file in parallel routes? What happens without it?

default.jsx provides a fallback UI for parallel route slots when Next.js cannot recover their active state after a full-page reload; without it, unmatched slots trigger a 404 error or build failure depending on your Next.js version

What is the purpose of the default.jsx file in parallel routes? What happens without it?

default.jsx provides a fallback UI for parallel route slots when Next.js cannot recover their active state after a full-page reload; without it, unmatched slots trigger a 404 error or build failure depending on your Next.js version

Scenario Questions

Follow-up Questions