`default.js` Explained: Fallbacks for Parallel Routes

The Next.js default.js file renders fallback content inside a parallel route slot when Next.js cannot tell which subpage was active there. This only comes up after a hard navigation, such as a full page reload, because a soft client-side navigation already keeps track of each slot's state on its own.

App.tsx

// app/dashboard/@analytics/default.tsx
export default function Default() {
  return null;
}

Returning null is the most common choice: it renders nothing for that slot until a route inside it is visited directly, while the rest of the dashboard renders normally around it.

Why a slot needs this at all

Consider a dashboard with a team slot and an analytics slot. Navigating client-side to a settings page updates only the team slot, leaving the analytics slot showing whatever it last displayed. Refreshing the page loses that memory entirely, since a fresh request has no client-side history to consult.

Next.js needs some content to put in the analytics slot for that fresh request, and the default file supplies it. Without one, the framework has no way to decide what belongs there on the very first render of a hard-loaded page.

What happens without one

A named slot with no default file and no matching route now throws an error during development and at build time, requiring you to add one before the route can render. This replaced the older behavior of silently falling back to a 404 for that slot. To restore the previous 404 fallback deliberately, call the notFound function from inside the file instead of returning null.

App.tsx

// app/dashboard/@analytics/default.tsx
import { notFound } from "next/navigation";
 
export default function Default() {
  notFound();
}

The implicit children slot behaves differently: skipping its default file still produces a 404 for the entire route on a hard navigation, not just an error demanding a fix, because children has no separate named slot folder to hold that file. Keeping that distinction straight avoids a confusing debugging session where one missing file throws loudly and another fails silently with a plain 404 page.

Reading params inside default.js

Like a page, default.tsx receives a params prop covering every dynamic segment from the root down to that slot, resolved as a promise.

App.tsx

// app/[artist]/@sidebar/default.tsx
export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>;
}) {
  const { artist } = await params;
  return <p>No sidebar view for {artist}</p>;
}

When to add one

Every project using parallel routes should add a default file to each slot from the start, rather than discovering the requirement from an error later. For the full slot convention this file supports, see parallel routes in Next.js. For the related file that resets state instead of filling a gap, see template.js vs layout.js.