Intercepting(인터셉팅) Routes

인터셉팅 라우트를 사용해서 현재 레이아웃 내에서, 애플리케이션의 다른 부분의 경로를 로드할 수 있습니다. 이 라우팅 패러다임은 다음과 같은 경우에 유용할 수 있습니다. - 사용자가 다른 컨텍스트로 전환하지 않고, 경로의 콘텐츠를 표시하려는 경우.

예를 들어 피드 안에 있는 사진을 클릭할 때, 사진을 보여주기 위한 모달이 피드 위에 표시됩니다. 이 경우에 Next.js는 /feed 경로를 가로채고 URL이 /photo/123으로 보이도록 “마스킹”합니다.

그러나, 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진으로 이동할 때, 모달 대신 전체 사진 페이지가 렌더링되어야 합니다. 경로 차단이 발생하지 않아야 합니다.

1. Convention(규칙)

인터셉팅 라우트는 상대 경로 규칙 ../과 유사한 (..) 규칙으로 정의할 수 있습니다. (..) 규칙은 세그먼트를 기준으로 동작합니다.

이렇게 사용할 수 있습니다.

• (.) 동등한 레벨의 세그먼트와 일치
• (..) 한 단계 상위 레벨의 세그먼트와 일치
• (..)(..) 두 단계 상위 레벨의 세그먼트와 일치
• (...) 루트 app 디렉토리의 세그먼트와 일치

예를 들어, (..)photo 디렉토리를 생성하여 feed 세그먼트 안에서 photo 세그먼트를 가로챌 수 있습니다

Note : (..) 컨벤션은 file-system이 아닌 route segments를 기준으로 합니다.

2. 예시

2.1 Modals

모달을 생성하기 위해서 인터셉팅 라우트를 병렬 라우트와 같이 사용할 수 있습니다.

이 패턴을 사용해서 모달을 생성하면 모달 작업 시 흔히 격는 여려움을 해결할 수 있으며 아래와 같은 동작이 가능합니다.

• URL을 통해서 공유 가능한 모달 컨탠츠를 만들 수 있습니다.
• 페이지가 새로고침 될 때 모달을 닫지 않고 컨탠츠를 유지할 수 있습니다.
• 뒤로 가기 상황에서 이전 페이지로 가지 않고 모달을 닫을 수 있습니다.
• 앞으로 가기 상황에서 모달을 다시 열 수 있습니다.

위의 예에서, @modal은 세그먼트가 아니라 슬롯이므로, photo 세그먼트 경로에 (..) 일치자를 사용할 수 있습니다. 즉, photo 경로는 파일 시스템 레벨이 두 개 더 높지만, 세그먼트 레벨은 한 개만 더 높습니다.

단계별 예시는 병렬 경로 설명서를 참조하거나, 이미지 갤러리 예시를 참조하세요.

알아두면 유용합니다:

다른 예로는 상단 탐색 모음에서 로그인 모달을 열면서, 전용 /login 페이지도 함께 열거나 사이드 모달에서 장바구니를 여는 것 등이 있습니다.