M

MLOG

Tiếng Việt

Phân tích sâu về Interception Routes của Next.js, trình bày các chiến lược triển khai modal và overlay thực tế để nâng cao trải nghiệm người dùng.

Tuyến đường chặn (Interception Routes) của Next.js: Làm chủ các mẫu Modal và Overlay

Next.js, một framework React phổ biến, cung cấp các tính năng mạnh mẽ để xây dựng các ứng dụng web hiệu suất cao và có khả năng mở rộng. Một trong những tính năng đó là Interception Routes (Tuyến đường chặn), cung cấp một cách tinh vi để xử lý các kịch bản định tuyến phức tạp, đặc biệt là khi triển khai các mẫu modal và overlay. Hướng dẫn toàn diện này sẽ khám phá cách tận dụng Interception Routes để tạo ra trải nghiệm người dùng liền mạch và hấp dẫn.

Interception Routes là gì?

Interception Routes cho phép bạn chặn một tuyến đường và hiển thị một giao diện người dùng khác mà không thay đổi URL trên trình duyệt. Hãy coi nó như một lối đi tắt tạm thời giúp làm phong phú thêm trải nghiệm người dùng. Điều này đặc biệt hữu ích cho:

Tại sao nên sử dụng Interception Routes cho Modal và Overlay?

Các phương pháp truyền thống để xử lý modal và overlay thường liên quan đến việc quản lý trạng thái trong một component, điều này có thể trở nên phức tạp và dẫn đến các vấn đề về hiệu suất. Interception Routes mang lại một số lợi thế:

Thiết lập Interception Routes trong Next.js

Hãy minh họa cách triển khai Interception Routes bằng một ví dụ thực tế: tạo một modal để hiển thị chi tiết sản phẩm trong một ứng dụng thương mại điện tử.

Cấu trúc dự án

Đầu tiên, hãy xác định cấu trúc thư mục. Giả sử chúng ta có một thư mục `products` nơi mỗi sản phẩm có một ID duy nhất.

app/
  products/
    [id]/
      page.js       // Trang chi tiết sản phẩm
    @modal/
      [id]/
        page.js   // Nội dung modal cho chi tiết sản phẩm
    default.js  // Bố cục cho thư mục products
  page.js           // Trang chủ

Giải thích

Triển khai mã nguồn

1. Trang chủ (app/page.js)

Trang này hiển thị danh sách các sản phẩm, mỗi sản phẩm có một liên kết mở chi tiết sản phẩm trong một modal.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Product List

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. Trang chi tiết sản phẩm (app/products/[id]/page.js)

Trang này hiển thị chi tiết đầy đủ của sản phẩm. Trong một ứng dụng thực tế, trang này sẽ lấy dữ liệu từ một API hoặc cơ sở dữ liệu. Quan trọng là, nó cung cấp một liên kết quay lại danh sách sản phẩm ban đầu.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Product Details

 
Product ID: {id}

 
This is the full product details page.

 Back to Product List
 

 );
}

3. Nội dung Modal (app/products/@modal/[id]/page.js)

Đây là phần quan trọng – Interception Route. Nó hiển thị nội dung modal sử dụng cùng một ID sản phẩm. Lưu ý hook `useParams` để truy cập ID.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Product Modal

 
Product ID: {id}

 
This content is rendered within a modal!

  history.back()}>Close Modal
 

 

 );
}

Lưu ý: Chỉ thị `'use client';` là cần thiết cho các tương tác phía máy khách, đặc biệt khi sử dụng `useParams`.

Tạo kiểu (modal.module.css): Một module CSS đơn giản được sử dụng để tạo kiểu cơ bản cho modal. Điều này rất quan trọng để định vị modal một cách chính xác.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Đảm bảo nó nằm trên cùng */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Bố cục (app/products/default.js)

Bố cục này bao bọc tuyến đường `@modal`, đảm bảo nó được hiển thị trong ngữ cảnh của sản phẩm.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 

 );
}

Cách thức hoạt động

  1. Khi người dùng nhấp vào một liên kết sản phẩm trên trang chủ (ví dụ: `/products/1`), Next.js nhận ra đây là một tuyến đường trong thư mục `products`.
  2. Vì có tuyến đường chặn `@modal`, Next.js sẽ kiểm tra xem có tuyến đường phù hợp nào dưới `@modal` không.
  3. Nếu tìm thấy một kết quả khớp (ví dụ: `/products/@modal/1`), Next.js sẽ hiển thị nội dung từ `app/products/@modal/[id]/page.js` ngay trong trang hiện tại. URL trên trình duyệt vẫn là `/products/1`.
  4. Các kiểu `modalOverlay` sẽ định vị modal nằm trên nội dung bên dưới.
  5. Nhấp vào "Close Modal" sử dụng `history.back()` để quay lại, thực chất là đóng modal và trở về trạng thái trước đó.

Các kỹ thuật Interception Route nâng cao

1. Xử lý nút Quay lại (Back)

Một khía cạnh quan trọng của việc triển khai modal là đảm bảo hành vi đúng đắn với nút quay lại của trình duyệt. Khi người dùng mở một modal và sau đó nhấp vào nút quay lại, lý tưởng nhất là họ sẽ đóng modal và trở về ngữ cảnh trước đó, chứ không phải điều hướng ra khỏi ứng dụng.

Phương thức `history.back()` được sử dụng trong ví dụ đã đạt được hiệu ứng này bằng cách quay lại một bước trong lịch sử của trình duyệt. Tuy nhiên, đối với các kịch bản phức tạp hơn, bạn có thể cần triển khai một trình xử lý nút quay lại tùy chỉnh để xem xét trạng thái định tuyến hiện tại.

2. Nội dung Modal động

Trong các ứng dụng thực tế, nội dung modal có thể sẽ là động, được lấy từ một API hoặc cơ sở dữ liệu dựa trên ID sản phẩm. Bạn có thể sử dụng API `fetch` hoặc một thư viện lấy dữ liệu như SWR hoặc React Query trong component modal để truy xuất dữ liệu cần thiết.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Thay thế bằng endpoint API của bạn
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Loading...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... other product details ... */}
  history.back()}>Close Modal
 

 );
}

3. Modal lồng nhau

Interception Routes có thể được lồng vào nhau để tạo ra các luồng công việc modal phức tạp. Ví dụ, một người dùng có thể mở một modal chi tiết sản phẩm và sau đó nhấp vào một nút để mở một modal sản phẩm liên quan. Điều này có thể được thực hiện bằng cách tạo các tuyến đường chặn bổ sung trong thư mục `@modal`.

4. Xử lý lỗi 404

Hãy xem xét kịch bản một người dùng điều hướng đến URL của modal với ID sản phẩm không hợp lệ (ví dụ: `/products/@modal/nonexistent`). Bạn nên triển khai xử lý lỗi phù hợp để hiển thị một trang 404 thân thiện với người dùng hoặc chuyển hướng người dùng đến một trang sản phẩm hợp lệ.

// app/products/@modal/[id]/page.js

// ... (rest of the component)

 if (!product) {
 return 
Product not found.
; // Hoặc chuyển hướng đến trang 404
 }

// ... (rest of the component)

5. Các mẫu Overlay

Mặc dù các ví dụ đã tập trung vào modal, Interception Routes cũng có thể được sử dụng cho các overlay. Thay vì căn giữa nội dung, overlay có thể xuất hiện dưới dạng một thanh bên (sidebar) hoặc một bảng điều khiển trượt vào từ một phía của màn hình. Kiểu CSS sẽ khác, nhưng logic định tuyến vẫn giữ nguyên.

Ví dụ và trường hợp sử dụng trong thực tế

Ví dụ: Nền tảng thương mại điện tử quốc tế Hãy tưởng tượng một trang web thương mại điện tử toàn cầu. Khi người dùng nhấp vào một sản phẩm, chi tiết sẽ mở ra trong một modal. URL thay đổi thành `/products/[product_id]`, cho phép liên kết trực tiếp và mang lại lợi ích về SEO. Nếu người dùng chuyển đổi ngôn ngữ trên trang modal (ví dụ: từ tiếng Anh sang tiếng Tây Ban Nha), chi tiết sản phẩm sẽ được lấy theo ngôn ngữ đã chọn và nội dung modal sẽ cập nhật một cách liền mạch. Hơn nữa, trang web có thể phát hiện vị trí của người dùng (với sự đồng ý) và hiển thị thông tin vận chuyển phù hợp với khu vực của họ ngay trong modal.

Các thực hành tốt nhất khi sử dụng Interception Routes

Các giải pháp thay thế cho Interception Routes

Mặc dù Interception Routes cung cấp một giải pháp mạnh mẽ cho các mẫu modal và overlay, các phương pháp tiếp cận khác cũng có thể được xem xét:

Kết luận

Interception Routes của Next.js cung cấp một cách mạnh mẽ và tinh tế để triển khai các mẫu modal và overlay trong ứng dụng web của bạn. Bằng cách tận dụng tính năng mạnh mẽ này, bạn có thể tạo ra các trải nghiệm liền mạch, thân thiện với SEO và thân thiện với người dùng. Mặc dù có các phương pháp tiếp cận thay thế, Interception Routes cung cấp một sự kết hợp độc đáo các lợi ích, khiến chúng trở thành một công cụ có giá trị trong kho vũ khí của bất kỳ nhà phát triển Next.js nào.

Tài liệu tham khảo bổ sung