Next.js 패러렐 라우트, 인터셉팅 라우트

Next.js의 패러렐 라우트(Parallel Route)와 인터셉팅 라우트(Intercepting Routes)에 대해 알아보겠습니다.

패러렐 라우트(Parallel Route)

패러렐 라우트는 병렬 라우팅을 의미합니다. 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다.

이를 통해 각 경로에 대해 독립적인 오류 및 로드 상태를 정의할 수 있습니다.

즉, 한 페이지에 두 개의 페이지를 불러올 수 있다는 의미입니다.

기존 모달과의 차이점

패러렐 라우트 사용하기

패러렐 라우트는 명명된 슬롯(@)을 사용하여 생성됩니다.

예를 들어 @modal 형태로 슬롯을 생성할 수 있으며, 이는 경로 세그먼트가 아니므로 URL 구조에 영향을 주지 않습니다.

💡 단, 위치는 (폴더 이름)/@modal으로 하면 패러렐 라우트가 안되는 버그가 있습니다. @modal 위치로 해주셔야됩니다.

...
<Layout>
  <Analytics />
  <Team />
  {/* /app/@modal/page.tsx이 보여짐 */}
  {modal}

  {children}
</Layout>

💡 children prop은 폴더에 매핑할 필요가 없는 암시적 슬롯입니다. 즉, app/page.tsx 와 app/@children/page.tsx 는 동일합니다. 단, children의 @children 폴더는 생략되었다고 보면 됩니다.

💡 다른 계층 구조를 갖고 있는 페이지는 병렬로 렌더링 할 수 없습니다. 예를들어, app/page.tsx 와 app/@modal/page.tsx 는 병렬로 렌더링 할 수 없다는 의미입니다. 따라서 병렬로 렌더링 하기 위해서는 슬롯과 다른 슬롯(혹은 페이지)가 같은 계층 구조를 가져야 한다.

💡 paralled route는 page.tsx 대신 default.tsx를 통해 기본 페이지가 작성되며, intercepting route를 통해 모달을 구현하고 싶다면 default.tsx의 return null을 해야 합니다.

인터셉팅 라우트(Intercepting Routes)

Next.js의 인터셉팅 라우트 기능은 현재 레이아웃 내에서 다른 페이지로의 경로 전환을 효과적으로 관리할 수 있게 해주며,

이는 특히 사용자가 다른 컨텍스트로 전환하지 않고도 새로운 페이지의 내용을 표시해야 하는 경우에 유용합니다.

이를 통해, 예를 들어 모달창 같은 동적인 UI 구성 요소를 구현할 수 있습니다.

인터셉팅 라우트 사용 방법

인터셉팅 라우트는 경로 문법 (..), (.) 를 사용하여 정의할 수 있으며, 이는 상대 경로 규칙과 유사합니다.

(.)      동일한 수준의 세그먼트와 일치
(..)     한 수준 위의 세그먼트와 일치
(..)(..) 두 수준 위의 세그먼트와 일치
(...)    루트 app 디렉터리의 세그먼트와 일치

• 예시: 모달창 구현하기 - app/@modal/(..)login

app/@modal/(..)login 경로를 통해 login/page.tsx 페이지를 모달창으로 가로채고 싶으면 아래의 방식을 이용하면 됩니다.

1. 위의 패러랠 라우트의 layout과 동일하게 @modal이 정의 되어있어야 합니다.
2. app/page.tsx파일에서 /login으로 가는 링크가 있을때,

<Link href='/login'>로그인 모달창 띄우기</Link>

3. 일반적으로 사용자는 app/login/page.tsx 페이지를 보게 됩니다.

<p>~원래의 로그인 페이지~</p>

4. 하지만, 인터셉팅 라우트를 사용 할 경우 아래의 페이지가 나옵니다.

<p>~가로챈 로그인 페이지~</p>

단, 이를 위해 app/@modal/default.tsx가 존재해야 하며, 모달 구현 시 이곳에 보통 null 값을 반환하도록 합니다.

export default function Default() {
  return null;
}

5. 3번의 기본 app/login/page.tsx도 생성해야 하는 이유는

사용자가 페이지를 새로 고침하거나 직접 /login 주소를 입력해 접근할 경우 해당 페이지가 보이기 때문입니다.

💡 인터셉팅 라우트는 클라이언트에서 라우팅 할 때만 적용됩니다.

인터셉팅 라우트는 반드시 서버를 재시작해야 적용이 됩니다.

이상으로 Next.js의 패러렐 라우트와 인터셉팅 라우트에 대해 알아보았습니다.

이를 통해 모달창과 같은 UI를 생성하여 사용자 경험을 향상시키고 보다 효율적인 웹 애플리케이션을 구축할 수 있습니다.

참고: Next.js Documentation