Next.js: Parallel и intercepting routes — пример кода

// app/layout.tsx — parallel slots arrive as named props
export default function Layout({
  children, modal,
}: { children: React.ReactNode; modal: React.ReactNode }) {
  return <>{children}{modal};   // modal slot overlays the feed
}

// app/@modal/(.)photo/[id]/page.tsx — INTERCEPTS clicks to /photo/[id]
import { Modal } from './modal';
export default async function PhotoModal({ params }: { params: Promise }) {
  const { id } = await params;
  return ;  // renders as overlay, feed stays behind
}

// app/@modal/default.tsx — REQUIRED: what the slot shows when there's no match
export default function Default() { return null; }

// app/photo/[id]/page.tsx — the real page (direct load / refresh / share)
export default async function PhotoPage({ params }: { params: Promise }) {
  const { id } = await params;
  return ;
}