Intercepting Routes

Intercepting routes 는 애플리케이션의 다른 부분에 있는 라우트를 현재 레이아웃 내에서 로드할 수 있게 해줍니다.

이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 콘텐츠를 표시하려는 경우 유용할 수 있습니다.

 

 

예를 들어 피드 안에 있는 사진을 클릭했을 때 피드 위에 모달의 형태로 사진을 볼 수 있습니다.

해당 케이스에서 Next.js 는 /photo/123 라우트를 가로채 URL 을 마스킹한 다음 /feed  에 오버레이 합니다.

 

그러나 해당 페이지에서 새로고침을 했을 때 모달이 아닌 사진 페이지의 전체가 렌더링 됩니다.

해당 케이스에서 route interception 은 발생하지 않습니다.

 

Convention

Intercepting routes 는 (..) 컨벤션으로 정의될 수 있습니다. 이는 세그먼트에 대한 ../ 와 유사한 상대 경로 규칙입니다.

 

(.) : 같은 레벨에서 매칭되는 세그먼트

(..): 한 레벨 위에서 매칭되는 세그먼트

(..)(..): 두 레벨 위에서 매칭되는 세그먼트

(...): app directory 의 루트에서 매칭되는 세그먼트