Next.js App Router에서는 Parallel Routes라는 기능을 통해
하나의 레이아웃에서 여러 개의 라우트를 동시에 렌더링할 수 있습니다.

이를 통해 복잡한 UI 구조를 더 유연하게 구성할 수 있습니다.

대표적인 예:

• Dashboard Layout
• Sidebar + Content
• Multi-panel UI
• Modal Slot

---

Parallel Routes란?

Parallel Routes는 하나의 레이아웃에서 여러 라우트를 병렬로 렌더링할 수 있도록 하는 기능입니다.

즉 하나의 페이지에서 여러 개의 독립적인 라우트 슬롯(slot)을 구성할 수 있습니다.

예시

dashboard
 ├ sidebar
 ├ main
 └ analytics

각 영역이 독립적으로 렌더링되는 라우트입니다.

---

왜 필요한가?

기존 라우팅 방식에서는 페이지 하나당 하나의 라우트만 렌더링됩니다.

하지만 실제 애플리케이션에서는 다음과 같은 UI 구조가 많습니다.

예시

Dashboard
 ├ Sidebar
 ├ Main Content
 └ Activity Panel

이러한 구조를 일반적인 라우팅으로 구현하면

• 컴포넌트 의존도가 커지고
• 라우트 구조가 복잡해집니다.

Parallel Routes를 사용하면 각 UI 영역을 라우트 단위로 관리할 수 있습니다.

---

Parallel Routes 핵심 개념

Parallel Routes는 slot 기반 라우팅입니다.

slot은 다음 규칙을 사용합니다.

@slotName

예시

@analytics
@team
@modal

---

기본 폴더 구조

예시: Dashboard

app
├ dashboard
│ ├ layout.tsx
│ ├ page.tsx
│ ├ @analytics
│ │ └ page.tsx
│ └ @team
│     └ page.tsx

설명

• page.tsx → 기본 route
• @analytics → analytics slot
• @team → team slot

---

Layout에서 Slot 사용

Parallel Routes는 layout에서 slot을 props로 받아 렌더링합니다.

예시

export default function DashboardLayout({
  children,
  analytics,
  team
}) {
  return (
    <div>
      <main>{children}</main>
      <aside>{analytics}</aside>
      <section>{team}</section>
    </div>
  );
}

구조

slot	역할
children	기본 페이지
analytics	analytics route
team	team route

---

Slot 동작 방식

Parallel Routes의 slot은 독립적으로 렌더링됩니다.

예시

/dashboard

렌더링

children → dashboard/page
analytics → dashboard/@analytics/page
team → dashboard/@team/page

즉 하나의 페이지에서 여러 라우트가 동시에 표시됩니다.

---

Default Slot

slot에 기본 페이지를 설정할 수도 있습니다.

예시

@analytics
 └ default.tsx

default.tsx는 해당 slot에 렌더링할 페이지가 없을 때 기본 UI로 사용됩니다.

---

Conditional Routes

Parallel Routes는 조건에 따라 다른 UI를 보여줄 수도 있습니다.

예시

dashboard
 ├ @team
 │ ├ page.tsx
 │ └ settings
 │     └ page.tsx

URL

/dashboard
/dashboard/settings

이때 slot이 서로 다른 페이지를 렌더링할 수 있습니다.

---

Modal 구현 예시

Parallel Routes는 Modal UI 구현에 자주 사용됩니다.

예시 구조

app
├ feed
│ ├ layout.tsx
│ ├ page.tsx
│ └ @modal
│     └ photo
│         └ [id]
│             └ page.tsx

layout

export default function FeedLayout({
  children,
  modal
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

이렇게 하면

feed page
 + modal slot

구조가 됩니다.

---

Parallel Routes 특징

1️⃣ 여러 라우트를 동시에 렌더링

한 페이지에서 여러 UI 영역을 독립적으로 관리할 수 있습니다.

---

2️⃣ 레이아웃 중심 라우팅

layout이 UI 구조의 중심이 됩니다.

---

3️⃣ slot 기반 구조

@slot

폴더로 라우트를 분리합니다.

---

언제 사용하면 좋을까?

대표적인 사용 사례

Dashboard UI

sidebar
main content
activity panel

---

Multi-panel UI

예시

mail app
 ├ inbox
 ├ mail preview
 └ mail details

---

Modal UI

feed
 └ modal slot

---

Parallel Routes의 장점

• 복잡한 UI 구조 관리 가능
• 레이아웃 기반 UI 설계
• 라우트 단위 UI 분리
• 재사용성 증가

---

정리

Parallel Routes는 Next.js App Router의 고급 라우팅 기능입니다.

핵심 특징

• 하나의 레이아웃에서 여러 라우트를 동시에 렌더링
• slot 기반 구조
• 복잡한 UI 구성에 적합

대표 사용 사례

• Dashboard UI
• Multi-panel interface
• Modal slot UI

Parallel Routes는 Intercepting Routes와 함께 사용하면
Next.js에서 매우 강력한 라우팅 패턴을 구현할 수 있습니다.

---

참고 자료

Next.js 공식 문서

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