Trasy równoległe i przechwytujące
Implementuj zaawansowane wzorce interfejsu, takie jak trasy równoległe dla niezależnych sekcji i trasy przechwytujące do obsługi widoków przypominających modalne.
Trasy równoległe i przechwytujące to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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
@slotfolder contains its ownpage.jsorroute.js. - The parent
layout.jsreceives 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.jsParallel 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 rootappdirectory 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.jsIntercepting 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 (
@slotfolders) 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.
Często zadawane pytania
Czy lekcja „Trasy równoległe i przechwytujące” jest bezpłatna?
Tak — pełny tekst „Trasy równoległe i przechwytujące” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.
Co nauczysz się w „Trasy równoległe i przechwytujące”?
Implementuj zaawansowane wzorce interfejsu, takie jak trasy równoległe dla niezależnych sekcji i trasy przechwytujące do obsługi widoków przypominających modalne. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?
Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Trasy równoległe i przechwytujące”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?
Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Trasy dynamiczne i segmenty catch-all
- Zagnieżdżone układy i grupy tras
- Trasy równoległe i przechwytujące
- Konwencje interfejsów ładowania i błędów