The Complete Production SOP: How to Deploy and Run Next.js Parallel & Intercepting Modal Routes in Autonomous AI Agents

---
name: "nextjs-parallel-intercepting-routes"
description: "Build shareable URL modals and split dashboard views using Parallel (@slot) and Intercepting ((.)) routes."
metadata:
  author: "Vercel"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "build url modal nextjs"
  - "parallel routes @modal nextjs"
  - "intercepting routes (..) nextjs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Gallery App',
  description: 'Next.js Parallel & Intercepting Routes Demo',
};

export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

export default function ModalDefault() {
  return null;
}

'use client';

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

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

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-neutral-900 p-6 rounded-xl max-w-lg w-full relative">
        <button
          onClick={() => router.back()}
          className="absolute top-4 right-4 text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
          aria-label="Close modal"
        >
          ✕
        </button>
        <h2 className="text-xl font-bold mb-4">Photo ID: {params.id}</h2>
        <p className="text-neutral-600 dark:text-neutral-300">Intercepted modal overlay view.</p>
      </div>
    </div>
  );
}