Next.js 14 có gì mới ? - Intercepting Routes

Trịnh Đình Tài

@taitd

Trong version 14, Next.js đã giới thiệu hai mẫu định tuyến nâng cao: Parallel Routes và Intercepting Routes. Trong phạm vi bài viết này, mình sẽ giới thiệu về Intercepting Routes nhé. Let's go!

1. Intercepting Routes là gì ?

Intercepting Routes cho phép bạn chặn hoặc dừng hành vi định tuyến mặc định để hiển thị một chế độ xem hoặc thành phần thay thế khi điều hướng qua giao diện người dùng, trong khi vẫn duy trì tuyến đường dự định cho các tình huống như tải lại trang. Nó thường được sử dụng khi bạn muốn hiển thị tuyến đường trong khi vẫn giữ nguyên ngữ cảnh của trang hiện tại.

Hãy lấy vài ví dụ để dễ hiểu hơn.

Login modal

Giả sự bạn có thanh navigation bar với 1 link là /login, theo truyền thống, khi click vào link thì sẽ được chuyển hướng tới trang đăng nhập đầy đủ, nhưng với Intercepting Routes, bạn hoàn toàn có thể hiển thị login modal trong khi URL phản ánh route /login, giúp link có thể chia sẻ được và đảm bảo trang đăng nhập đầy đủ được hiển thị khi tải lại trang hoặc truy cập trực tiếp từ URL.

Ứng dụng bảng tin

Ở trên các ứng dụng mạng xã hội, ví dụ như facebook, khi bạn click vào ảnh thường sẽ điều hướng đến một trang mới dành riêng cho hình ảnh đó. Với Intercepting Routes, việc nhấp vào ảnh sẽ mở ra một modal ở trên trang hiện tại, hiển thị ảnh phóng to. URL cập nhật để phản ánh ảnh đã chọn, vẫn có thể chia sẻ được. Truy cập URL trực tiếp hoặc tải lại trang sẽ dẫn đến chế độ xem toàn trang của ảnh.

2. Triển khai Intercepting Routes trong Next.js

Đầu tiên, tạo 2 route /feed và /feed/photo, ở trang feed, tạo một thẻ Link chuyển hướng tới feed/photo

• app/feed/page.tsx: Đại diện cho route localhost:3000/feed.
• app/feed/photo/page.tsx: Đại diện cho route localhost:3000/feed/photo.

Cấu trúc thư mục sẽ như sau:

import Link from "next/link"
 
export default function FeedPage() {
  return (
    <>
      <h1>Feed page</h1>
      <div>
        <Link href="/feed/photo">Photo</Link>
      </div>
    </>
  )
}

export default function PhotoPage() {
  return <h1>Photo Page</h1>
}