Skip to main content

Parallel Routes — 병렬 라우트 (@slot)

@folder는 이름 있는 슬롯(named slot)을 생성합니다. 부모 layout이 여러 슬롯을 동시에 렌더링하며, 각 슬롯은 독립적으로 네비게이션할 수 있습니다.

파일 구조

parallel-routes/
├── page.tsx              ← 이 페이지 (개념 설명)
└── demo/
    ├── layout.tsx        ← children + @sidebar 수신
    ├── page.tsx          ← 메인 영역 (홈)
    ├── default.tsx       ← children 기본 fallback
    ├── @sidebar/
    │   ├── page.tsx      ← 홈 사이드바
    │   ├── default.tsx   ← 사이드바 fallback
    │   └── settings/
    │       └── page.tsx  ← 설정 사이드바
    └── settings/
        └── page.tsx      ← 설정 메인 콘텐츠

layout.tsx에서 슬롯 수신

// demo/layout.tsx
interface LayoutProps {
  children: React.ReactNode;
  sidebar: React.ReactNode;  // @sidebar 폴더명 → prop 이름
}

const Layout = (props: LayoutProps) => {
  const { children, sidebar } = props;
  return (
    <div className="flex">
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
};

default.tsx — Fallback이 필요한 이유

슬롯에 현재 URL과 매칭되는 라우트가 없으면 Next.js는 default.tsx를 렌더링합니다. 이 파일이 없으면 404가 발생합니다. 소프트 내비게이션에서는 이전 상태가 유지되지만, 하드 내비게이션(새로고침)에서는 반드시 default.tsx가 필요합니다.

병렬 라우트 데모 체험하기 →인터셉트 라우트 갤러리 데모 →
← 스터디로 돌아가기

핵심 파일 코드

// demo/nextjs/16.1.6/project-structure/parallel-routes/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}