Parallel Route

~24 min · parallel routes, @slot, dashboard

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Parallel route 가 하는 것

한 layout 이 여러 route segment 를 동시에 render, 각각 자기 loading/error boundary 들고. Slot 은 @name folder convention 으로 선언. Layout 이 각 slot 을 named prop 으로 받아.

app/
  layout.tsx          # @analytics, @team 받음
  page.tsx            # default slot → children
  @analytics/
    page.tsx          # `analytics` 로 render
    loading.tsx
  @team/
    page.tsx          # `team` 로 render
    error.tsx

독립적 loading 과 error

각 slot 이 자기 Suspense + error boundary 가져. Team panel 빨리 load 되고 analytics panel 천천히 load 돼도 서로 freeze 안 시켜.

`default.tsx` 항상 박아

Hard navigation/refresh 시, parallel slot 이 어떤 state 였는지 Next.js 가 항상 못 알아. default.tsx 없으면 slot 이 404. 합리적인 fallback 박아둬.

Code

Layout 이 slot consume·tsx

// app/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-3 gap-6 p-6">
      <section className="col-span-2">{children}</section>
      <aside className="space-y-4">
        {analytics}
        {team}
      </aside>
    </div>
  );
}

각 slot 자기 loading·tsx

// app/@analytics/loading.tsx
export default function AnalyticsLoading() {
  return <div className="h-40 animate-pulse rounded-lg bg-gray-100" />;
}

// app/@analytics/page.tsx
export default async function Analytics() {
  const stats = await getAnalytics(); // 느림
  return <AnalyticsPanel stats={stats} />;
}

Default fallback 이 404 막아줌·tsx

// app/@analytics/default.tsx
export default function Default() {
  return null; // 또는 placeholder
}

External links

Parallel routes

Exercise

Dashboard layout 에 @analytics slot 추가, loading.tsx fallback 으로 chart 그려. Network tab 에서 main page 가 analytics 끝나기 전에 render 되는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousRoute Group Next →Intercepting Route

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.