Next.js App Router에서는 Intercepting Routes라는 기능을 통해
현재 페이지를 유지한 채 다른 라우트를 가로채서(intercept) UI로 표시할 수 있습니다.

대표적으로 모달 라우팅(modal routing) 구현에 사용됩니다.

예를 들어:

• /feed 페이지에서 게시글을 클릭
• 전체 페이지 이동 대신 모달로 /photo/123 표시
• 새로고침하면 /photo/123 전체 페이지로 이동

이러한 UX를 구현할 때 Intercepting Routes를 사용합니다.

---

Intercepting Routes란?

Intercepting Routes는 현재 레이아웃 컨텍스트 안에서 다른 라우트를 렌더링하도록 가로채는 기능입니다.

즉, 실제 URL은 이동하지만 현재 페이지 위에 다른 라우트를 표시할 수 있습니다.

Next.js 공식 설명:

Intercepting routes allow you to load a route within the current layout while masking the URL.

---

왜 필요한가?

일반적인 라우팅에서는 페이지 이동 시 전체 페이지가 변경됩니다.

예시

/feed → /photo/123

이 경우

• 기존 페이지 상태 사라짐
• UX 끊김
• 뒤로가기 UX 어색함

하지만 Intercepting Routes를 사용하면:

/feed
  └ modal: /photo/123

UX

• 배경: /feed
• 모달: /photo/123
• URL: /photo/123

즉 페이지 이동 + 모달 UX를 동시에 구현할 수 있습니다.

---

동작 방식

Intercepting Routes는 특수 폴더 이름 규칙을 사용합니다.

폴더	의미
(.)	같은 레벨 라우트 intercept
(..)	한 단계 상위 라우트 intercept
(..)(..)	두 단계 상위
(...)	루트부터 intercept

---

예제 구조

예시: 피드에서 사진 모달을 띄우는 구조

app
├ feed
│ ├ page.tsx
│ └ @modal
│     └ (..)photo
│         └ [id]
│             └ page.tsx
├ photo
│ └ [id]
│     └ page.tsx

설명

• /photo/[id] → 실제 페이지
• (..)photo/[id] → feed에서 모달로 intercept

---

Parallel Routes와 함께 사용

Intercepting Routes는 보통 Parallel Routes와 함께 사용합니다.

@modal

이 슬롯에 모달을 렌더링합니다.

예시 layout

export default function FeedLayout({
  children,
  modal
}: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (
    <>
      {children}
      {modal}
    </>
  )
}

구조

• children → 기본 페이지
• modal → intercept된 라우트

---

페이지 구현 예시

feed 페이지

import Link from "next/link";

export default function Feed() {
  return (
    <div>
      <Link href="/photo/123">
        Open Photo
      </Link>
    </div>
  );
}

클릭 시

• 실제 URL → /photo/123
• 화면 → 모달 표시

---

모달 페이지

app/feed/@modal/(..)photo/[id]/page.tsx

export default function PhotoModal() {
  return (
    <div className="modal">
      Photo Modal
    </div>
  );
}

---

새로고침 동작

Intercepting Routes의 핵심 특징

상황	동작
링크 클릭	모달 표시
새로고침	실제 페이지 렌더
직접 URL 접근	실제 페이지 렌더

예시

/feed → photo 클릭
URL: /photo/123
UI: modal

새로고침

URL: /photo/123
UI: full page

---

언제 사용하면 좋을까?

대표적인 사용 사례

1️⃣ 이미지 갤러리

Instagram 스타일

grid → image modal

---

2️⃣ 게시글 상세

feed → post modal

---

3️⃣ 상품 미리보기

product list → quick view modal

---

장점

• URL 기반 상태 관리
• 자연스러운 뒤로가기 UX
• 페이지 상태 유지
• SEO 친화적

---

정리

Intercepting Routes는 Next.js App Router의 강력한 라우팅 기능입니다.

핵심 특징

• 다른 라우트를 현재 레이아웃에서 가로채기
• 모달 라우팅 구현
• URL은 유지하면서 UI만 다르게 렌더링
• Parallel Routes와 함께 사용

대표 사용 사례

• 이미지 갤러리
• 게시글 모달
• 상품 Quick View

---

참고 자료

Next.js 공식 문서

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes