0Pricing
Next.js 15 Fullstack Web Apps · Ders

Paralel ve Araya Giren Yollar

Bağımsız bölümler için paralel yollar ve kalıcı pencere benzeri deneyimler için araya giren yollar gibi ileri kullanıcı arayüzü kalıplarını uygulayın.

Paralel ve Araya Giren Yollar, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Paralel ve Araya Giren Yollar” dersi ücretsiz mi?

Evet — “Paralel ve Araya Giren Yollar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“Paralel ve Araya Giren Yollar” dersinde ne öğreneceğim?

Bağımsız bölümler için paralel yollar ve kalıcı pencere benzeri deneyimler için araya giren yollar gibi ileri kullanıcı arayüzü kalıplarını uygulayın. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Paralel ve Araya Giren Yollar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Dinamik Yollar ve Tümünü Yakalayan Bölümler
  2. İç İçe Düzenler ve Yol Grupları
  3. Paralel ve Araya Giren Yollar
  4. Yükleme ve Hata Arayüzü Kuralları
← Next.js 15 Fullstack Web Apps Sayfasına Dön