0Pricing
Next.js 15 Fullstack Web Apps · บทเรียน

เส้นทางคู่ขนานและเส้นทางดักจับ

นำรูปแบบส่วนติดต่อผู้ใช้ขั้นสูงมาใช้ เช่น เส้นทางคู่ขนานสำหรับส่วนที่ทำงานแยกกัน และเส้นทางดักจับสำหรับประสบการณ์ลักษณะโมดัล

เส้นทางคู่ขนานและเส้นทางดักจับ เป็นบทเรียน Next.js 15 Fullstack Web Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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.

คำถามที่พบบ่อย

บทเรียน “เส้นทางคู่ขนานและเส้นทางดักจับ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เส้นทางคู่ขนานและเส้นทางดักจับ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack Web Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เส้นทางคู่ขนานและเส้นทางดักจับ”

นำรูปแบบส่วนติดต่อผู้ใช้ขั้นสูงมาใช้ เช่น เส้นทางคู่ขนานสำหรับส่วนที่ทำงานแยกกัน และเส้นทางดักจับสำหรับประสบการณ์ลักษณะโมดัล คุณปฏิบัติ Next.js 15 Fullstack Web Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack Web Apps หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack Web Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เส้นทางคู่ขนานและเส้นทางดักจับ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack Web Apps นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack Web Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เส้นทางแบบไดนามิกและเซกเมนต์ครอบคลุมทั้งหมด
  2. เลย์เอาต์ซ้อนกันและกลุ่มเส้นทาง
  3. เส้นทางคู่ขนานและเส้นทางดักจับ
  4. แนวทางการจัดการส่วนติดต่อผู้ใช้ขณะโหลดและเกิดข้อผิดพลาด
← กลับไปที่ Next.js 15 Fullstack Web Apps