경로를 가로채는 것은 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 라우트를 로드할 수 있게 합니다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 라우트의 콘텐츠를 표시하고 싶을 때 유용합니다.
예를 들어, 피드에서 사진을 클릭할 때, 해당 사진을 모달에 표시하여 피드 위에 오버레이할 수 있습니다. 이 경우 Next.js는 /photo/123 라우트를 가로채서 URL을 마스킹하고 이를 /feed 위에 오버레이합니다.
그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진에 이동할 때, 모달이 아니라 전체 사진 페이지가 렌더링되어야 합니다. 어떠한 라우트 가로채기도 발생하지 않아야 합니다.
경로를 가로채는 데는 (..) 규칙을 사용할 수 있습니다. 이는 상대 경로 규칙 ../과 유사하지만 세그먼트에 대한 것입니다.
다음과 같이 사용할 수 있습니다:
(.)는 동일한 레벨의 세그먼트와 일치합니다. (..)는 하나 위의 레벨의 세그먼트와 일치합니다. (..)(..)는 두 레벨 위의 세그먼트와 일치합니다. (...)는 루트 앱 디렉토리에서 세그먼트와 일치합니다. 예를 들어, 피드 세그먼트 내에서 (..)photo 디렉토리를 만들어 사진 세그먼트를 가로챌 수 있습니다.
주의: (..) 규칙은 파일 시스템이 아닌 라우트 세그먼트를 기반으로 합니다.
가로채는 라우트는 모달을 생성하기 위해 평행 라우트와 함께 사용될 수 있습니다.
이 패턴을 사용하여 모달을 생성하면 다음과 같은 몇 가지 일반적인 도전 과제를 극복할 수 있습니다: