Параллельные и перехватывающие маршруты

app/
├── layout.tsx
├── page.tsx
├── @team/
│   └── page.tsx
└── @analytics/
    └── page.tsx

// app/layout.tsx
export default function Layout({
    children,
    team,
    analytics,
}: {
    children: React.ReactNode;
    team: React.ReactNode;
    analytics: React.ReactNode;
}) {
    return (
        <>
            {children}
            <div className="grid">
                {team}
                {analytics}
            </div>
        </>
    );
}

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

app/
├── feed/
│   ├── page.tsx
│   └── (..)photo/
│       └── [id]/
│           └── page.tsx    ← перехватывает /photo/[id]
└── photo/
    └── [id]/
        └── page.tsx        ← отдельный маршрут

export default async function PhotoModal({ params }) {
    const { id } = await params;
    const photo = await getPhoto(id);

    return (
        <div className="modal">
            <Image src={photo.url} alt={photo.alt} />
        </div>
    );
}

export default async function PhotoPage({ params }) {
    const { id } = await params;
    const photo = await getPhoto(id);

    return (
        <div className="photo-page">
            <Image src={photo.url} alt={photo.alt} />
            <Link href="/feed">К ленте</Link>
        </div>
    );
}

'use client';

import { useRouter } from 'next/navigation';

export function Modal({ children }) {
    const router = useRouter();

    return (
        <div className="backdrop" onClick={() => router.back()}>
            <div className="content" onClick={(e) => e.stopPropagation()}>
                {children}
            </div>
        </div>
    );
}