【Next.js】Parallel RoutesとIntercept Routesを使ってモダンなモーダルを実装してみた

　/
　├─ app
　│  ├─ _components
　│  │  ├─ CatPhotoList.tsx
　│  │  ├─ CatPhotoListItem.tsx
　│  │  ├─ Modal.tsx 
+ │  │  └─ Header.tsx
　│  ├─ _data
　│  │  └─ catPhotos.ts
　│  ├─ @modal
　│  │  └─ (.)photo
　│  │     └─ [photoId]
　│  │        └─ page.tsx
　│  │     └─ default.tsx
　│  └─ photo
　│     └─ [photoId]
　│        └─ page.tsx
+ ├─ layout.tsx
　└─ page.tsx

import Link from "next/link";

export default function Header() {
  return (
    <header className="border-b-2 px-8 py-4 mb-4 container mx-auto">
      <Link href="/">
        <h1 className="text-3xl text-center">猫の写真</h1>
      </Link>
    </header>
  );
}

 /
  ├─ app
  │  ├─ _components
+ │  │  ├─ CatPhotoList.tsx
+ │  │  ├─ CatPhotoListItem.tsx
  │  │  ├─ Modal.tsx
  │  │  └─ Header.tsx
+ │  ├─ _data
+ │  │  └─ catPhotos.ts
  │  ├─ @modal
  │  │  └─ (.)photo
  │  │     └─ [photoId]
  │  │        └─ page.tsx
  │  │     └─ default.tsx
  │  └─ photo
  │     └─ [photoId]
  │        └─ page.tsx
  ├─ layout.tsx
+ └─ page.tsx

export const catPhotos = [
  {
    id: 1,
    title: "お座りニャンコ",
    path: "/images/cat_image1.jpg",
  },
  {
    id: 2,
    title: "こちらを見上げるニャンコ",
    path: "/images/cat_image2.jpg",
  },
  {
    id: 3,
    title: "夢の中のニャンコ",
    path: "/images/cat_image3.jpg",
  },
];

"use client";

import { useState } from "react";
import { PhotoData } from "../photo/[photoId]/page";
import PhotoDisplay from "./CatPhotoListItem";

export default function CatPhotoList({
  photoDataList,
}: {
  photoDataList: PhotoData[];
}) {
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 pb-8">
        {photoDataList.map((photoData) => (
          <CatPhotoListItem key={photoData.id} photoData={photoData} />
        ))}
      </div>
      <div className="flex flex-col items-center gap-4 py-8 border-t">
        <p className="text-xl font-semibold">カウント: {count}</p>
        <button
          onClick={() => setCount(count + 1)}
          className="px-6 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity"
        >
          カウントを増やす
        </button>
      </div>
    </>
  );
}

"use client";

import Image from "next/image";
import Link from "next/link";
import { PhotoData } from "../photo/[photoId]/page";

type Props = {
  photoData: PhotoData;
};

export default function CatPhotoListItem({ photoData }: Props) {
  return (
    <>
      <div className="flex flex-col gap-4">
        <h1 className="text-3xl text-center">{photoData.title}</h1>
        <Link href={`/photo/${photoData.id}`}>
          <div className="border-2 rounded-xl overflow-hidden aspect-square relative">
            <Image
              src={photoData.path}
              alt={photoData.title}
              sizes="256px"
              fill
              style={{
                objectFit: "cover",
              }}
            />
          </div>
        </Link>
      </div>
    </>
  );
 }

 /
  ├─ app
  │  ├─ _components
  │  │  ├─ CatPhotoList.tsx
  │  │  ├─ CatPhotoListItem.tsx
  │  │  ├─ Modal.tsx 
  │  │  └─ Header.tsx
  │  ├─ _data
  │  │  └─ catPhotos.ts
  │  ├─ @modal
  │  │  └─ (.)photo
  │  │     └─ [photoId]
  │  │        └─ page.tsx
  │  │     └─ default.tsx
+ │  └─ photo
+ │     └─ [photoId]
+ │        └─ page.tsx
  ├─ layout.tsx
  └─ page.tsx

 /
  ├─ app
  │  ├─ _components
  │  │  ├─ CatPhotoList.tsx
  │  │  ├─ CatPhotoListItem.tsx
+ │  │  ├─ Modal.tsx
  │  │  └─ Header.tsx
  │  ├─ _data
  │  │  └─ catPhotos.ts
+ │  ├─ @modal
+ │  │  └─ (.)photo
+ │  │     └─ [photoId]
+ │  │        └─ page.tsx
+ │  │     └─ default.tsx
  │  └─ photo
  │     └─ [photoId]
  │        └─ page.tsx
  ├─ layout.tsx
  └─ page.tsx

npx shadcn@latest add dialog

"use client"

import {
    Dialog,
    DialogOverlay,
    DialogContent,
} from "./ui/dialog"
import { useRouter } from "next/navigation"

export function Modal({
    children,
}: {
    children: React.ReactNode
}) {
    const router = useRouter()

    const handleOpenChange = () => {
        router.back()
    }

    return (
        <Dialog defaultOpen={true} open={true} onOpenChange={handleOpenChange}>
            <DialogOverlay>
                <DialogContent className="overflow-y-hidden">
                    {children}
                </DialogContent>
            </DialogOverlay>
        </Dialog>
    )
}