Next.js Docs (10) Intercepting Routes

Intercepting Routes

Intercepting Routes(경로 가로채기)는 현재 페이지의 context를 유지하면서 현재 레이아웃 내에서 route를 로딩할 수 있다. 이 라우팅 패러다임은 특정 route를 "가로채서" 다른 route를 표시할 때 유용하다.

 

예를 들어 피드 내에서 사진을 클릭할 때 피드 위에 뜨는 Modal이 사진과 함께 표시되어야 한다. 이 경우 Next.js는 /feed route를 가로채고 이 URL을 "mask"하여(가장하여?) /photo/123을 대신 표시한다.

출처 : Next.js 공식문서

 

그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침 하는 등 직접 사진으로 이동할 때는 Modal 대신 전체 사진 페이지가 렌더링 되어야 한다. route 가로채기가 발생하면 안된다.

출처 : Next.js 공식문서

 

 

Convention

Intercepting routes는 ( .. ) 컨벤션을 사용하여 정의할 수 있으며 이것은 상대 경로 컨벤션인 ../ 와 유사하지만, segment에 대한 것이다. 

 

다음과 같이 사용가능 : 

- ( . ) : 동일한 레벨의 세그먼트를 match 시킨다.

- ( .. ) : 한 레벨 위의 세그먼트를 match 시킨다.

- ( .. ) ( .. ) : 두 레벨 위의 세그먼트를 match 시킨다.

- ( ... ) : 루트 app 디렉토리의 세그먼트를 match 시킨다.

 

예를 들어 ( .. ) photo 디렉토리를 만들어 feed 세그먼트 내에서 사진 세그먼트를 가로챌(intercept) 수 있다.

출처 : Next.js 공식문서

* ( .. ) 컨벤션은 파일 시스템이 아니라 route 세그먼트를 기반으로한다.

 

 

Examples

Modals

Intercepting Routes는 Parallel Routes와 함께 사용하여 modal을 만들 수 있다.

 

이 패턴을 사용하여 modal을 만들면 modal 작업시 생기는 몇가지 일반적인 문제를 해결할 수 있고, 이를 통해 다음과 같은 작업을 수행할 수 있다.

- URL을 통해 modal 컨텐츠를 공유할 수 있도록 설정

- 페이지 새로고침할 때 modal을 닫는 대신 context 유지

- 뒤로가기를 할 때 이전 route로 이동하지 않고 modal 닫기

- 앞으로가기를 할 때 modal 다시열기

출처 : Next.js 공식문서

* 위의 예에서 @modal은 세그먼트가 아니라 슬롯이므로 photo 세그먼트에 대한 route에서 ( ... ) matcher를 사용할 수 있다. 즉, photo route는 파일 시스템상으로는 두 레벨이 높지만, 세그먼트상으로는 하나의 레벨만 높다.

 

다른 예로는 전용 /login 페이지가 있는 상태에서 상단 navbar에서 로그인 modal을 열거나, 사이드 modal에서 쇼핑 카트를 여는 것이 있다.

 

Intercepted, Parallel Routes 를 사용한 modal 예시는 다음 url 참조

https://github.com/vercel-labs/nextgram

GitHub - vercel-labs/nextgram: A sample Next.js app showing dynamic routing with modals as a route.

 

 

 

Reference

- https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

Routing: Intercepting Routes | Next.js