Intercepting Route

~22 min · intercepting routes, modal, overlay

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Instagram pattern

Feed 에서 사진 클릭: 사진 modal open. 그 URL 에서 page refresh: 사진 full page view. 같은 URL, 두 표현. Intercepting route 가 이걸 declarative 로.

Convention

Prefix	"어디서부터 intercept"
`(.)`	같은 level segment
`(..)`	한 level 위
`(..)(..)`	두 level 위
`(...)`	app root

코드 안에서 pattern

Intercepting route 를 parallel route (@modal) 와 같이 써서 modal 버전을 현재 layout 안에서 render 하면서, refresh/share 위한 deep-link page 도 보존.

Code

Photo modal 의 folder layout·text

app/
├── layout.tsx
├── page.tsx                                  # /
├── @modal/
│   ├── default.tsx                           # default 로 아무것도 없음
│   └── (.)photos/[id]/page.tsx               # /photos/:id intercept
├── photos/
│   └── [id]/page.tsx                         # full page view
└── feed/page.tsx                             # /feed (links to /photos/:id)

Intercepted page 가 modal 로 render·tsx

// app/@modal/(.)photos/[id]/page.tsx
import { Modal } from '@/components/Modal';

export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);

  return (
    <Modal closeHref="/feed">
      <img src={photo.url} alt={photo.title} className="max-h-[70vh]" />
      <p className="text-sm mt-2">{photo.title}</p>
    </Modal>
  );
}

Direct nav 는 full page·tsx

// app/photos/[id]/page.tsx
export default async function PhotoPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const photo = await getPhoto(id);
  return (
    <main className="p-8">
      <img src={photo.url} alt={photo.title} className="w-full max-h-[80vh] object-contain" />
      <h1 className="text-2xl mt-4">{photo.title}</h1>
      <p className="mt-2 text-gray-600">{photo.description}</p>
    </main>
  );
}

External links

Intercepting routes

Exercise

/photos/:id 로 link 거는 feed page 만들어. Intercepting route 박아서 thumbnail 클릭 시 modal open, 새 tab 에 URL 붙여넣으면 full photo page load 되게.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousParallel Route Next →Loading, Error, Not Found

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.