[Next] Intercepting Route

Intercepting Routef란

Next.js의 **인터셉팅 라우트(Intercepting Routes)**는 사용자가 현재 페이지에 머물면서도 다른 라우트로 이동한 것처럼 보이게 하는 고급 라우팅 기능입니다. 마치 팝업 모달처럼 현재 페이지 위에 새로운 페이지를 렌더링하는 효과를 구현할 때 주로 사용됩니다.

이 기능의 핵심은, 사용자가 라우트를 이동할 때 URL은 변경되지만 실제 페이지 전환이 일어나지 않고 현재 페이지의 컨텍스트를 유지하는 것입니다. 이를 통해 사용자 경험을 매끄럽게 만들고, 불필요한 페이지 리로드를 줄일 수 있습니다.

 

작동 방식 🕵️‍♂️

Next.js에서 인터셉팅 라우트를 사용하려면 파일 시스템에서 특정 경로 앞에 (...) 문법을 추가합니다. 이 문법은 Next.js에게 해당 라우트를 인터셉트할 의도임을 알려줍니다.

예를 들어, photos 페이지에서 특정 사진을 클릭했을 때 모달을 띄워 사진 상세 정보를 보여주고 싶다고 가정해 봅시다.

/app
├── dashboard
│   ├── page.tsx
├── photos
│   ├── page.tsx          // 메인 사진 갤러리 페이지
│   └── [id]
│       └── page.tsx      // 일반적인 사진 상세 페이지
├── (..)photos
│   └── [id]
│       └── page.tsx      // ✅ 인터셉팅 라우트

이 구조에서 사용자가 /photos/[id]로 이동하면, Next.js는 두 가지 경로를 확인합니다.

1. 일반적인 라우트: 사용자가 브라우저 주소창에 /photos/123를 직접 입력하거나 외부에서 접근한 경우, Next.js는 photos/[id]/page.tsx를 렌더링합니다.
2. 인터셉팅 라우트: 사용자가 /photos 페이지에서 <Link>를 통해 photos/123으로 이동한 경우, Next.js는 (..)photos/[id]/page.tsx를 찾아 현재 photos 페이지 위에 모달처럼 겹쳐 렌더링합니다.

---

주요 장점

• 향상된 사용자 경험: 페이지 전체를 새로 로드하지 않고 필요한 정보만 팝업 형태로 보여주어 사용자가 맥락을 잃지 않게 합니다.
• 성능 최적화: 페이지 리로드가 없어 불필요한 데이터 재요청이나 렌더링 오버헤드를 줄일 수 있습니다.
• 간결한 URL: 모달이 띄워져도 URL은 실제 경로(/photos/[id])를 유지하므로, 북마크하거나 공유하기에 편리합니다.

인터셉팅 라우트 문법

인터셉팅 라우트의 문법은 상대 경로를 나타내는 .을 사용하며, 부모 라우트 세그먼트의 수에 따라 달라집니다.

• (.): 같은 폴더 레벨의 라우트를 가로챕니다.
• _ 또는 (..): 한 단계 위 폴더의 라우트를 가로챕니다.
• (..): 두 단계 위 폴더의 라우트를 가로챕니다.
• (...): 루트 폴더의 라우트를 가로챕니다.