[next.js 공식문서] 08. Parallel Routes

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Parallel Routes

@folder로 정의

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

아래처럼 children에 병렬로 가져다 쓸 수 있음

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}
    </>
  );
}

행동

URL

슬롯은 URL 구조에 영향을 주지 않음
파일 경로 : /dashboard/@audience/subscribers
URL 경로 : /dashboard/subscribers

Navigating

앞뒤로 탐색할 때(소프트 탐색 사용) URL이 업데이트되고 브라우저가 이전에 활성화된 슬롯을 복원합니다.

예를 들어 사용자가 /dashboard/subscribers로 이동했다가 /dashboard/impressions로 이동하는 경우, 다시 이동할 때 URL이 dashboard/subscribers로 업데이트됩니다.

default.js

브라우저가 이전 상태를 복원할 수 없는 경우 렌더링할 파일을 폴백으로 정의할 수 있음

dashboard
├── @team
│   └── ...
├── @user
│   └── ...
├── default.js
├── layout.js
└── page.js

예제

조건부 경로

사용자 유형에 따라 경로 렌더링

import { getCurrentUserType } from 'lib/user';

export default async function Layout({
  children,
  user,
  team,
}: {
  children: React.ReactNode;
  user: React.ReactNode;
  team: React.ReactNode;
}) {
  const userType: 'user' | 'team' = getCurrentUserType();

  return (
    <>
      {/* Render the user or team slot depending on the current user type */}
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}