경로 가로채기(Intercepting Routes)
경로를 interception하면 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드할 수 있다고 한다. 이 라우팅 패러디암은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용하다.
예를 들어, 피드(/feed)에서 사진을 클릭하면 피드에 오버레이하여 사진을 모달로 표시할 수 있다.
폴더 구조
아래의 경우 Next.js는 /photo/123 경로를 가로가로채서 URL을 마스크(mask)하고 /feed위에 덮어 씌운다. 이미지를 클릭했을시 photo 폴더에 photo/id 경로에 page.js가 나타나는 것이 아닌 feed폴더 아래 (..)photo아래에 page.js가 표시되는 것이다.
그러나 공유 가능한 URL을 클릭하거나 페이지를 새로고침하여 /photo로 이동하는 경우, 경로 차단이 발생하지 않고 전체 사진 페이지가 렌더링되어야 한다. 이 말은 즉 (..)photo 아래에 page.js가 아닌 기존에 photo 폴더 아래 page.js가 렌더링 된다는 것이다.
Convention
Interception routes는 (..) convention으로 정의할 수 있다. 이는 상대 경로 convention과 유사하지만 세그먼트에 대한 것이다.
사용 방법
- (.) : 동일한 level의 세그먼트 일치
- (..) : 한 단계 위의 level 세그먼트 일치
- (..)(..): 두 단계 위의 level 세그먼트 일치
- (...): 루트 app 디렉터리 세그먼트 일치
예를 들어, (..)photo 디렉터리를 생성하여 feed 세그먼트 내에서 photo 세그먼트를 interception 할 수 있다.
폴더 구조와 동일한 사진
(..) convention은 파일 시스템이 아님 경로 세그먼트를 기반으로 한다.
예시
Modals
Interception routes는 Parallel routes와 함께 사용하여 모달을 생성할 수 있다. 다음과 같은 모달 구축시 일반적인 문제를 해결할 수 있다.
- URL을 통해 모달 콘텐츠를 공유 가능하게 만듬
- 모달을 닫는 대신 페이지를 새로 고칠 때 컨텍스트 유지
- 이전 경로로 이동하지 않고 뒤로 탐색 시 모달을 닫음
- 앞으로 탐색 시 모달을 연다
사용자가 클라이언트 측 탐색을 사용하여 갤러리에서 사진 모달을 열거나 공유 가능한 URL에서 직접 사진 페이지로 이동할 수 있는 UI 패턴
위의 예시에서 @modal은 세그먼트가 아니라 슬롯이므로 photo에 대한 경로는 2단계 위가 아닌 1단계 위므로 (..) matcher를 사용할 수 있다.
