Intercepting Routes

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

예를 들어, 피드에서 사진을 클릭할 때 사진을 피드 위에 모달로 오버레이하여 표시할 수 있습니다. 이 경우, Next.js는 /photo/123 라우트를 가로채고 URL을 마스킹하여 /feed 위에 오버레이합니다.

하지만, 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진으로 이동하는 경우에는 전체 사진 페이지가 모달 대신 렌더링되어야 합니다. 이때는 라우트 가로채기가 발생하지 않습니다.

Convention

Intercepting routes는 (..) 규칙으로 정의할 수 있으며, 이는 세그먼트에 대해 상대 경로 규칙 ../와 유사합니다.

다음과 같은 방법으로 사용할 수 있습니다:

• (.)는 동일 레벨의 세그먼트를 매칭합니다.
• (..)는 한 레벨 위의 세그먼트를 매칭합니다.
• (..)(..)는 두 레벨 위의 세그먼트를 매칭합니다.
• (...)는 루트 app 디렉토리의 세그먼트를 매칭합니다.

예를 들어, feed 세그먼트 내에서 photo 세그먼트를 가로채려면 (..)photo 디렉토리를 생성할 수 있습니다.

(..) 규칙은 라우트 세그먼트를 기반으로 하며, 파일 시스템을 기반으로 하지 않는다는 점에 유의하세요.

Examples

Modals

Intercepting Routes는 Parallel Routes와 함께 사용되어 모달을 생성할 수 있습니다. 이를 통해 모달을 구축할 때 일반적으로 발생하는 문제를 해결할 수 있습니다:

• 모달 콘텐츠를 URL을 통해 공유 가능하게 만들기.
• 페이지를 새로 고침할 때 컨텍스트를 유지하여 모달을 닫지 않기.
• 이전 탐색 시 모달 닫기.
• 앞으로 탐색 시 모달 다시 열기.

사용자가 클라이언트 측 탐색을 사용하여 갤러리에서 사진 모달을 열거나 공유 가능한 URL에서 직접 사진 페이지로 이동할 수 있는 다음 UI 패턴을 고려해보세요:

위 예제에서 photo 세그먼트로의 경로는 (..) 매처를 사용할 수 있습니다. @modal은 세그먼트가 아니기 때문입니다. 즉, 파일 시스템 상으로는 두 레벨 위에 있지만 라우트 세그먼트 상으로는 한 레벨 위에 있습니다.

단계별 예제를 보려면 Parallel Routes 문서를 참조하거나 image gallery example (opens in a new tab)을 참조하세요.

알아두면 좋은 점:

• 다른 예로는 상단 내비게이션 바에서 로그인 모달을 열거나 전용 /login 페이지를 가지는 경우, 또는 사이드 모달에서 쇼핑 카트를 여는 경우가 포함될 수 있습니다.