The Next.js Parallel Route That Caused an Infinite Loop (And Killed the Server)

"CPU is at 100% and won't come down."

I had just deployed a new dashboard with parallel routes – one slot for the main content, one for a notifications panel.

Within minutes, the server was unresponsive.

The Setup

App Router with parallel slots:

app/
  dashboard/
    @main/
      page.js
    @notifications/
      page.js
    layout.js

// app/dashboard/layout.js
export default function DashboardLayout({ main, notifications }) {
  return (
    <div>
      <aside>{notifications}</aside>
      <main>{main}</main>
    </div>
  );
}

No default.js files. I thought they were optional.

The Infinite Loop

When a user navigated from /dashboard to /dashboard/settings, Next.js tried to render the slots.

But because there was no default.js for the @notifications slot when a route didn't explicitly define it, Next.js kept re‑trying to match the route – causing an infinite loop.

The server's event loop got stuck. CPU spiked to 100%. Requests timed out after 60 seconds.

The Fix

Add default.js to each parallel slot folder:

// app/dashboard/@notifications/default.js
export default function Default() {
  return null; // or a fallback UI
}

And for @main/default.js as well.

Now Next.js knows what to render when the active route doesn't match the slot.

What I Learned

• Parallel routes always need default.js for every slot, even if just returning null.
• Test navigation to sub‑routes – the bug only appeared on second‑level pages.
• Use loading.js to prevent unexpected behavior during transitions.

That infinite loop took down our dashboard for 30 minutes. Now every parallel slot has a default.js in our starter template.