Next.js 15 Fullstack Web Apps · 강의

병렬 경로와 가로채기 경로

독립적인 영역을 위한 병렬 경로와 모달과 유사한 환경을 위한 가로채기 경로 같은 고급 UI 패턴을 구현합니다.

병렬 경로와 가로채기 경로은(는) CoddyKit의 무료 Next.js 15 Fullstack Web Apps 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack Web Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Advanced Routing Patterns

Welcome! In this lesson, we'll dive into two powerful Next.js App Router features: Parallel Routes and Intercepting Routes.

These patterns help you build more complex, flexible, and performant user interfaces.

Independent UI with Parallel Routes

Parallel Routes allow you to render multiple independent views or "slots" within the same layout, at the same time.

Think of a dashboard with different sections (e.g., analytics, recent activity) loading independently, or a social media feed with a profile sidebar.

Defining Parallel Route Slots

You define a parallel route by creating a folder prefixed with @, like @team or @analytics, inside your layout's directory.

Each @slot folder contains its own page.js or route.js.
The parent layout.js receives these slots as props.

Parallel Routes File Structure

Here's how you might set up a dashboard with two parallel slots: @users and @reports. The main layout.js renders both.

File Structure:

app/
├── dashboard/
│   ├── @users/
│   │   └── page.js
│   ├── @reports/
│   │   └── page.js
│   └── layout.js
└── page.js

Parallel Route Layout Code

The layout.js receives the parallel slots as props and renders them. If a slot isn't active for the current URL, Next.js can render a default.js.

/* app/dashboard/layout.js */
export default function DashboardLayout({ children, users, reports }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>{users}</div>
        <div style={{ flex: 1 }}>{reports}</div>
      </div>
      {children} {/* Renders content of dashboard/page.js if present */}
    </div>
  );
}

/* app/dashboard/@users/page.js */
export default function UsersPage() {
  return (
    <div style={{ border: '1px solid blue', padding: '10px' }}>
      <h2>Users Section</h2>
      <p>List of active users...</p>
    </div>
  );
}

/* app/dashboard/@reports/page.js */
export default function ReportsPage() {
  return (
    <div style={{ border: '1px solid green', padding: '10px' }}>
      <h2>Reports Section</h2>
      <p>Monthly sales report...</p>
    </div>
  );
}

Intercepting Routes for Modals

Intercepting Routes allow you to "catch" a route from within the current layout and display it as an overlay or modal, without changing the browser's URL.

This is perfect for showing image galleries, product details, or login forms on top of the current page.

Defining Intercepting Routes

Intercepting routes use the (.), (..), or (...) conventions to match segments at different levels relative to the current route.

(.)segment: Catches a segment at the same level.
(..)segment: Catches a segment one level above.
(...)segment: Catches a segment at the root app directory level.

Intercepting a Sibling Route

Imagine a photo gallery. When you click a photo, instead of navigating to /photos/123, a modal opens, but the URL remains /photos.

File Structure:

app/
├── photos/
│   ├── @modal/(.)[id]/
│   │   └── page.js
│   ├── page.js
│   └── layout.js

Intercepting Route Code Example

Here's a simplified example for a photo modal. The @modal slot catches the [id] route when navigated from /photos, displaying it as an overlay.

/* app/photos/page.js */
import Link from 'next/link';

export default function PhotosPage() {
  const photos = [{ id: '1', title: 'Sunset' }, { id: '2', title: 'Mountain' }];
  return (
    <div>
      <h1>My Photos</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
        {photos.map(photo => (
          <Link key={photo.id} href={`/photos/${photo.id}`}>
            <div style={{ border: '1px solid #ccc', padding: '10px', textAlign: 'center' }}>
              <h3>{photo.title}</h3>
              <p>(Click to view)</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

/* app/photos/@modal/(.)[id]/page.js */
export default function PhotoModal({ params }) {
  return (
    <div style={{
      position: 'fixed', top: '0', left: '0', right: '0', bottom: '0',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex',
      justifyContent: 'center', alignItems: 'center'
    }}>
      <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
        <h2>Photo ID: {params.id}</h2>
        <p>This is a modal for photo details.</p>
        <Link href="/photos">Close Modal</Link>
      </div>
    </div>
  );
}

When to Use Which Pattern

Parallel Routes are for displaying multiple, independent sections of UI simultaneously in a fixed layout (e.g., dashboards).

Intercepting Routes are for displaying content on top of the current page, typically as a modal, without changing the underlying URL (e.g., image viewers).

They solve different but equally important UI challenges!

Route Pattern Challenge

Consider a social media profile page. You want to display a user's posts on the left and their followers list on the right, both updating independently. Additionally, clicking a post should open its full view in a modal.

Which routing patterns would best achieve these two distinct UI requirements?

Recap: Advanced Routing

Great job! You've learned about two powerful Next.js App Router features:

Parallel Routes (@slot folders) for displaying independent UI segments side-by-side.
Intercepting Routes ((.), (..), (...) conventions) for catching routes and showing them as overlays or modals.

These patterns unlock advanced UI compositions for complex applications.

자주 묻는 질문

“병렬 경로와 가로채기 경로” 강의는 무료인가요?

네 — “병렬 경로와 가로채기 경로” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack Web Apps 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“병렬 경로와 가로채기 경로”에서 뭘 배우나요?

독립적인 영역을 위한 병렬 경로와 모달과 유사한 환경을 위한 가로채기 경로 같은 고급 UI 패턴을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack Web Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack Web Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack Web Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“병렬 경로와 가로채기 경로” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack Web Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack Web Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Next.js 15 Fullstack Web Apps(으)로 돌아가기