Parallel และ Intercepting Routes

ไอเดียในหนึ่งประโยค

parallel routes ให้ layout เดียว render หลาย slot อิสระพร้อมกัน ส่วน intercepting routes ให้ route หนึ่ง render ภายใน layout ปัจจุบันแทนที่จะเปิดเป็นหน้าของตัวเอง

Parallel routes with named slots

folder ที่ขึ้นต้นด้วย @ อย่าง @team หรือ @analytics คือ named slot layout ใน folder เดียวกันรับแต่ละ slot มาเป็น prop และ render พร้อมกันได้ โดยแต่ละตัวมี loading และ error state อิสระของตัวเอง

app/
  dashboard/
    layout.tsx
    page.tsx
    @team/
      page.tsx
    @analytics/
      page.tsx

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  team: React.ReactNode
  analytics: React.ReactNode
}) {
  return (
    <section>
      {children}
      <div className="grid">
        {team}
        {analytics}
      </div>
    </section>
  )
}

The default.tsx fallback

เมื่อ navigate ไป route ที่ slot ไม่ได้ define ไว้ Next.js จะ render default.tsx ของ slot นั้นแทน ถ้าไม่มีไฟล์นี้ การ navigate ตรงไปยัง slot ที่ไม่ match จะ throw จึงควรใส่ตัวที่ return null หรือเรียก notFound()

// app/dashboard/@team/default.tsx
export default function Default() {
  return null
}

Intercepting routes

intercepting route convention render route ภายใน layout ปัจจุบันโดยที่ URL ยัง update prefix จับตาม segment level (.) สำหรับ level เดียวกัน (..) สำหรับขึ้นไปหนึ่ง level และ (...) จาก app root use case คลาสสิกคือ photo modal คลิกรูปใน feed แล้วรูปเปิดเป็น modal ทับ feed แต่การเข้า URL นั้นตรง ๆ จะ render หน้าเต็ม

app/
  feed/
    page.tsx
    @modal/
      (..)photo/
        [id]/page.tsx   // intercepts /photo/[id] as a modal
  photo/
    [id]/page.tsx       // the full standalone page

// app/feed/@modal/(..)photo/[id]/page.tsx
export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <dialog open>Photo {id} in a modal over the feed</dialog>
}

graph TD
  L["dashboard/layout.tsx"] --> C["children (page.tsx)"]
  L --> T["@team slot"]
  L --> A["@analytics slot"]
  F["click photo in feed"] --> M["(..)photo intercepts as modal"]
  DIRECT["visit /photo/42 directly"] --> FULL["full photo page"]

parallel slots และ modal ที่ถูก intercept