Parallel and intercepting routes (intro)

Advanced App Router patterns let you render multiple pages in the same layout (parallel routes) or show a modal over the current page while preserving context (intercepting routes). You will see these in photo galleries, login modals, and split dashboards.

Parallel routes

Named slots use @folder syntax. A layout receives each slot as a prop:

app/dashboard/
  layout.tsx
  @analytics/page.tsx
  @team/page.tsx
  page.tsx

export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <>
      {children}
      <section>{analytics}</section>
      <section>{team}</section>
    </>
  );
}

Intercepting routes

Soft navigation can show @modal/(..)photo/[id] while the URL reflects the full photo page—closing the modal returns to the feed without losing scroll position. Folders use (.), (..), (...) to intercept relative segments.

When to adopt

Start with simple routes. Add parallel/intercepting patterns when UX requirements demand simultaneous views or modal deep-linking—not on day one.

Self-check

1. What does the @analytics folder represent?
2. Why intercept a route instead of always navigating to a full page?