Parallel Routes

• 경로가 동일한 2개 이상의 페이지를 별개로 라우팅할 수 있음
• 폴더로 slot이라는 것을 만들어 생성할 수 있으며 이는 @folder 식의 작명을 통해 가능함
  ex)

dashboard
├── @audience
│   ├── demographics
│   │   └── page.js
│   ├── subscribers
│   │   └── page.js
│   └── page.js
├── @views
│   ├── impressions
│   │   └── page.js
│   ├── view-duration
│   │   └── page.js
│   └── page.js
├── layout.js
└── page.js

//code
function AudienceNav() {
  return <nav>...</nav>;
}

function ViewsNav() {
  return <nav>...</nav>;
}

export default function Layout({
  children,
  audience,
  views,
}: {
  children: React.ReactNode;
  audience: React.ReactNode;
  views: React.ReactNode;
}) {
  return (
    <>
      <h1>Tab Bar Layout</h1>
      {children}

      <h2>Audience</h2>
      <AudienceNav />
      {audience}

      <h2>Views</h2>
      <ViewsNav />
      {views}
    </>
  );
}

• slot은 url 구조에 영향을 주지 않음
• 만약 뒤로가기, 앞으로가기를 할 시에는 기존에 해당되었던 slot의 레이아웃을 불러오게 됨
• 새로고침과 같이 hard navigation이 발생하는 경우 slot을 감싸는 폴더에 있는 default.js 레이아웃을 불러오게 됨

Intercepting Routes

• 브라우저 url을 CSR 방식으로 변경하되, 페이지 간의 context 유지를 할 수 있게 해주는 라우팅 방법
  side modal, 피드의 사진 표시, 장바구니 모달 표시등의 기능에서 유용하게 활용 가능
• 폴더명 앞에 (..)을 붙여 intercepting route를 표시 가능

[feed]
├── (..)photo/[id]
│   └── page.tsx
└── layout.tsx
photo/[id]
├── page.tsx
└── layout.tsx