Advanced UI: Parallel & Intercepting Routes

Đây là những tính năng đưa Next.js lên một tầm cao mới về trải nghiệm người dùng (UX).

1. Parallel Routes (Slot `@folder`)

Giả sử bạn có Dashboard với Header, Sidebar, Analytics, và Team. Thay vì nhét tất cả vào 1 file, bạn có thể render chúng song song (Parallel).

Cấu trúc thư mục:

Code:

dashboard/
├── layout.tsx
├── @analytics/
│   └── page.tsx
└── @team/
    └── page.tsx

Cách sử dụng trong Layout:

tsx:

export default function Layout({ children, analytics, team }) {
  return (
    <>
      {children}   {/* dashboard/page.tsx */}
      {analytics}  {/* dashboard/@analytics/page.tsx */}
      {team}       {/* dashboard/@team/page.tsx */}
    </>
  );
}

Lợi ích:

Independent Streaming: Analytics chậm có thể loading riêng, Team nhanh hiện trước.
Independent Error Handling: Team lỗi không làm chết cả trang Dashboard.

2. Intercepting Routes (`(..)folder`)

Bạn đã bao giờ thấy trên Facebook: Click vào ảnh, trang web hiện Modal ảnh, URL đổi thành /photo/123, nhưng trang Feed bên dưới vẫn giữ nguyên chưa? Nhưng khi bạn F5 (Refresh) trang đó, nó lại hiện trang ảnh toàn màn hình?

Đó chính là Intercepting Routes.

Ký hiệu:

(.): Khớp các route ở cùng một tầng.
(..): Khớp các route ở tầng trên.
(...): Khớp các route từ root.

Ví dụ: Click vào sản phẩm hiện Modal

Code:

app/
├── (..)product/[id]/
│   └── page.tsx      <- Giao diện Modal (chỉ hiện khi click từ Feed)
├── product/[id]/
│   └── page.tsx      <- Giao diện Full Page (hiện khi vào trực tiếp hoặc F5)
└── page.tsx          <- Feed sản phẩm

User đang ở /feed.
User click vào ảnh ID 1.
URL đổi sang /photo/1.
Next.js "đánh chặn" (intercept) cái URL đó, thay vì chuyển sang trang Photo toàn màn hình, nó render (..)photo/[id]/page.tsx chèn vào một Slot của trang Feed hiện tại.
User thấy Modal hiện lên trên nền Feed.
User F5 trang /photo/1 -> Next.js render trang photo/[id]/page.tsx bình thường (Full page).

4. Default.tsx: Cứu cánh cho Parallel Routes

Khi bạn dùng Parallel Routes, nếu route hiện tại không khớp với một Slot cụ thể, Next.js sẽ bị lỗi 404 cho Slot đó. Hãy luôn tạo file default.tsx (trả về null hoặc Content mặc định) để Next.js sử dụng khi không tìm thấy trang chính xác cho slot đó.

Kết luận

Dùng Parallel Routes cho Dashboard phức tạp cần xử lý lỗi/loading riêng biệt.
Dùng Intercepting Routes cho các luồng "Contextual UI" như Modal, Gallery, Login Popup mà vẫn muốn giữ URL để share.
Hai tính năng này biến web app của bạn thành một ứng dụng "Native-like" thực thụ.

Bài trước

Backend in Next.js: Route Handlers & Middleware

Bài tiếp theo

Server Actions: Cuộc cách mạng Mutations

1. Parallel Routes (Slot @folder)

2. Intercepting Routes ((..)folder)

3. Case Study: Pinterest-style Modal

4. Default.tsx: Cứu cánh cho Parallel Routes

Kết luận

1. Parallel Routes (Slot `@folder`)

2. Intercepting Routes (`(..)folder`)