What is the Next.js App Router parallel routes and intercepting routes?

Parallel Routes allow simultaneously rendering multiple pages in the same layout, enabling complex UX patterns like split-pane views, modals, and dashboards with independently navigable sections. Defining parallel routes (slots): create folders prefixed with @: app/dashboard/@analytics/page.tsx, app/dashboard/@team/page.tsx. The parent layout receives them as props: // app/dashboard/layout.tsx export default function Layout({ children, analytics, team }) { return <div> <main>{children}</main> <aside>{analytics}</aside> <section>{team}</section> </div>; }. Each slot has independent navigation and loading states. Conditional rendering: render different content in a slot based on state/conditions — show modal overlay in the @modal slot. default.tsx: fallback when slot has no match at current URL — prevents 404 for unmatched slots. Intercepting Routes: intercept a route to show its content in the current context (like a modal) instead of navigating to the full page. Conventions: (.) — intercept same level; (..) — one level up; (...) — from root. Modal pattern: app/@modal/(.)photo/[id]/page.tsx — when navigating to /photo/1, if coming from /feed, show a modal overlay. If directly accessing /photo/1, show the full photo page. Implementation: slot @modal has a default.tsx that returns null; when modal route is intercepted, shows the modal component in the slot. Full page navigation unaffected.