[Next.js] parallel route와 intercept route - 기본 이론 정리

Next.js의 Parallel Routes와 Intercept Routes 정리

Next.js 13 이상에서는 App Router를 기반으로 더욱 유연하고 강력한 라우팅 기능을 제공합니다. 그 중 대표적인 기능이 바로 Parallel Routes와 Intercept Routes입니다. 이 글에서는 두 개념을 쉽게 이해할 수 있도록 예시와 함께 정리해 보겠습니다.

---

✅ Parallel Routes (병렬 라우트)

Parallel Routes는 하나의 페이지에서 여러 개의 UI 구성 요소를 병렬로 동시에 렌더링할 수 있도록 하는 기능입니다.

예를 들어, 어떤 페이지에 다음과 같은 UI가 있다고 가정해 봅시다:

• 왼쪽에는 팀 리스트
• 오른쪽에는 팀의 상세 분석
• 그 아래에는 메인 콘텐츠

이처럼 화면을 여러 개의 영역(Slot)으로 나누고 각각의 영역에 독립적으로 다른 페이지 컴포넌트를 렌더링할 수 있습니다. 이 때 사용하는 것이 바로 Parallel Routes입니다.

🧩 Slot과 @폴더

Parallel Routes를 구성할 때는 layout 파일에서 props로 각 슬롯을 받아와서 표시하게 되며, Next.js에서는 이를 위해 @ 기호를 활용한 폴더명을 사용합니다.

예시 구조:
app/
├── @team/
├── @analytics/
├── layout.tsx
└── page.tsx

이 구조에서 layout.tsx는 다음과 같은 형태가 될 수 있습니다:

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      <aside>{team}</aside>
      <main>{children}</main>
      <section>{analytics}</section>
    </div>
  );
}

• @team, @analytics처럼 명시적으로 선언된 슬롯은 명시적 Slot

• children은 특정 폴더명이 아닌, URL 매칭으로 암묵적으로 렌더링되는 암묵적 Slot입니다.

🛠 default.tsx의 필요성

Parallel Routes의 경우, 해당 슬롯에 매칭되는 URL이 없으면 404 Not Found 에러가 발생합니다. 이를 방지하기 위해 각 @폴더 안에 default.tsx를 만들어 초기 렌더링 시 보여줄 기본 컴포넌트를 정의해야 합니다.

🚦 Intercept Routes (인터셉트 라우트)

Intercept Routes는 특정 URL 경로로의 이동을 가로채(intercept) 다른 컴포넌트를 표시하거나 모달처럼 오버레이 UI를 보여주고 싶을 때 사용합니다.

예를 들어 /product로 이동하면 원래는 전체 페이지가 전환되지만, 인터셉트 라우트를 사용하면 /product 페이지를 모달 형태로 현재 화면 위에 오버레이해서 보여줄 수 있습니다.

예시 구조:

app/
├── (marketing)/
│ └── page.tsx
├── (product)/
│ └── page.tsx
└── (marketing)/@modal/(..)product/page.tsx

• (..)product를 통해 /product URL을 가로채어 현재 context 위에서 /product를 보여줄 수 있습니다.

• 이를 통해 전체 페이지 전환 없이 사용자 경험을 개선할 수 있습니다.

app/
├── (marketing)/
│ └── page.tsx
├── (product)/
│ └── page.tsx
└──/@modal/(.)product/page.tsx

• 같은 level에 있는 product page를 intercept하려면 (.)product같이 사용합니다.
• 이외에 ( ** )( ** ) , ( *** ) (루트경로에 있는 page) 같이 상대경로로 intercept할 경로를 표시합니다.

마무리

보통 modal 기능은 parallel과 intercept를 혼용해서 사용하는 경우가 많습니다. url 경로로 구별하지 않고 표시해야 하는 modal은 일반적인
portal과 state로 구현하는 modal창을 사용하시는게 좋습니다. 또 한페이지에서 다양한 데이터를 fetch하는 경우 성능을 개선하기 위한 parallel 라우트 방식도 사용됩니다. 페이지를 parallel로 처리하면 api 요청도 병렬로 처리해 응답속도를 개선할 수 있습니다. 일반적인 경우의 next.js의 fetch함수는 순차적으로 1개의 fetch함수의 호출이 완료된 후 다음 fetch를 진행하기 때문입니다.

Parallel Routes와 Intercept Routes는 Next.js 앱의 구조를 더욱 유연하게 만들고, 사용자 경험을 끊김 없이 제공할 수 있도록 돕는 핵심 기능입니다. 처음에는 다소 생소할 수 있지만, 한 번 구조를 익히고 나면 강력한 UI 구현이 가능해집니다.