What are Intercepting Routes in Next.js?

(.)  - Same level
(..) - One level up
(..)(..) - Two levels up
(...) - From root

app/
├── @modal/
│   ├── default.tsx
│   └── (.)photo/[id]/
│       └── page.tsx      ← Intercepted (modal)
├── photo/[id]/
│   └── page.tsx          ← Full page
└── layout.tsx

// app/layout.tsx
export default function Layout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

// app/@modal/(.)photo/[id]/page.tsx
'use client';

import { useRouter } from 'next/navigation';

export default function PhotoModal({ params }) {
  const router = useRouter();

  return (
    <div className="modal-overlay" onClick={() => router.back()}>
      <div className="modal">
        <img src={`/photos/${params.id}`} />
      </div>
    </div>
  );
}

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