Next.js Parallel Routes

React supports slots, a mechanism that enables component composition over inheritance. Instead of prop drilling, slots let a React component pass down unknown chunks of JSX to its children. Any children along the hierarchy chain who do not care what is being passed down will happily hand the JSX parcels to their own children. Only the interested parties will then unpack the parcel and decide what to do with it, either to fill some holes or unpick the props useful to them.

The children prop is a use case of the mechanism. Under the hood, there is nothing special about the children prop - any other props can be used to pass arbitrary ReactNode JSX bundles around, too. This is especially useful when the JSX passed down is dynamic or conditional. For example, the widgets appearing in a sidebar may differ based on the type of pages or whether a user is signed in.

Next.js supports parallel routing that can load one or more pages (routes) simultaneously or conditionally, not surprisingly, powered by the slot pattern. By convention, Next.js defines a named slot with a @foldernaem directory.

./
└── app
    ├── @auth
    │   ├── login
    │   │   └── page.tsx
    │   └── signup
    │       └── page.tsx
    ├── layout.tsx
    └── page.tsx

Slots are not route segments and do not affect the URL structure. The file path /@auth/login is accessible via /login.

import { getUser } from '@/lib/auth';
 
export default function Layout({ 
  dashboard, 
  login,
}: { 
  dashboard: React.ReactNode,
  login: React.ReactNode,
}) { 
  const isLoggedIn = getUser();
  return isLoggedIn ? dashboard : login;
};