패러렐 라우트

패러렐 라우트 (Parallel Routes)?

Next.js 13에서 도입된 Parallel Routes는 여러 개의 경로를 동시에 렌더링할 수 있도록 해주는 기능이다.
기존의 레이아웃 기반 라우팅보다 유연하며, 다양한 UI 구성에 활용할 수 있다.

기본적으로, Parallel Routes는 여러 개의 @slot을 활용하여 독립적인 콘텐츠를 동시에 렌더링할 수 있도록 한다.
이 기능은 대시보드, 사이드바, 그리고 동적으로 변하는 UI를 구성하는 데 유용하다.

사용법

📁 폴더 구조 예시

/app
 ├── layout.tsx
 ├── page.tsx
 ├── @sidebar
 │   ├── layout.tsx
 │   ├── page.tsx
 ├── @content
 │   ├── layout.tsx
 │   ├── page.tsx

기본 구현

layout.tsx

export default function RootLayout({ children, sidebar, content }: {
  children: React.ReactNode;
  sidebar: React.ReactNode;
  content: React.ReactNode;
}) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '25%' }}>{sidebar}</aside>
      <main style={{ width: '75%' }}>{content}</main>
      {children}
    </div>
  );
}

@sidebar/page.tsx

export default function Sidebar() {
  return <nav>사이드바 메뉴</nav>;
}

@content/page.tsx

export default function Content() {
  return <section>메인 콘텐츠</section>;
}

이 구조를 통해 sidebar와 content가 독립적으로 렌더링되며, 필요에 따라 각 부분을 개별적으로 로딩하거나 상태를 유지할 수 있다.