Next.Js 13 Tuyến đường Song song: Hướng dẫn Toàn diện

1. Giới thiệu

Xin chào!

Chào mừng bạn đến với hướng dẫn toàn diện này về các tuyến đường song song trong Next.js.

Khi bối cảnh kỹ thuật số phát triển, sự phức tạp của phát triển web cũng vậy. Các ứng dụng web hiện đại không chỉ yêu cầu các cơ chế định tuyến mạnh mẽ mà còn linh hoạt để nâng cao trải nghiệm người dùng và phù hợp với các cấu trúc thiết kế phức tạp.

Bài viết này được xây dựng một cách tỉ mỉ để hiểu tính năng mạnh mẽ được giới thiệu trong Next.js 13.3 - Các tuyến đường song song.

Mục tiêu gồm hai phần: thứ nhất, cung cấp hiểu biết rõ ràng về tầm quan trọng của các tuyến đường song song và các ứng dụng thực tế của chúng, thứ hai, cung cấp thông tin chi tiết thực tế để triển khai chúng một cách hiệu quả trong các dự án Next.js của bạn.

Hãy bắt đầu hành trình này để khám phá tiềm năng biến đổi của các tuyến đường song song và cách chúng xác định lại ranh giới của thiết kế ứng dụng web.

2. Thế giới trước các tuyến đường song song

Trước khi bắt đầu các tuyến song song, các nhà phát triển web bị hạn chế về cách họ có thể cấu trúc và hiển thị nội dung động trên một chế độ xem. Cơ chế định tuyến truyền thống khá tuyến tính: một URL, một chế độ xem.

Chẳng hạn, hãy xem xét một thiết kế bảng điều khiển điển hình:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

Điều hướng đến /dashboard/user sẽ hiển thị Trang tổng quan người dùng, trong khi /dashboard/team sẽ hiển thị Trang tổng quan nhóm. Cả hai loại trừ lẫn nhau. Để xem một phân khúc khác, người dùng thường phải điều hướng hoàn toàn khỏi chế độ xem hiện tại của họ.

Điều này đặt ra những thách thức, đặc biệt là khi các nhà phát triển muốn hiển thị nhiều phân đoạn của một trang web đồng thời hoặc có điều kiện. Phương pháp định tuyến truyền thống thiếu tính linh hoạt, gây khó khăn cho việc tạo các bố cục tương tác, phức tạp như bảng điều khiển hoặc phương thức cạnh nhau mà không cần dùng đến giải pháp thay thế hoặc quản lý trạng thái phức tạp.

Rất may, với sự phát triển của các khung như Next.js và việc giới thiệu các tuyến đường song song, bối cảnh này đã được thay đổi đáng kể, mở ra một kỷ nguyên mới của thiết kế web năng động và thích ứng.

3. Hiểu các tuyến đường song song

Các tuyến song song là các tính năng đột phá được giới thiệu trong Next.js 13.3, thay đổi đáng kể cách các nhà phát triển tiếp cận định tuyến và trình bày nội dung trên web.

3.1 Giới thiệu về các Tuyến đường Song song:

Next.js 13.3 đưa ra một quy ước động mới, cho phép triển khai các trường hợp định tuyến nâng cao hơn. Như đã nêu trong tài liệu,

"Các tuyến song song cho phép bạn hiển thị nhiều trang trong cùng một chế độ xem, chẳng hạn như với bảng điều khiển hoặc phương thức phức tạp. Với các tuyến song song, bạn có thể đồng thời hiển thị một hoặc nhiều trang trong cùng một chế độ xem có thể được điều hướng độc lập."

Nói một cách đơn giản hơn, các thành phần hoặc phần khác nhau trong ứng dụng của bạn có thể tải đồng thời, mang lại cảm giác trôi chảy và phản hồi nhanh, đặc biệt nếu một số thành phần nhất định mất nhiều thời gian hơn do tìm nạp dữ liệu hoặc kết xuất.

3.2 Các trường hợp sử dụng: Bảng điều khiển, Phương thức và hơn thế nữa:

Cấu trúc của các ứng dụng web hiện đại thường yêu cầu bố cục nâng cao kết hợp nhiều chế độ xem hoặc yêu cầu cửa sổ bật lên theo ngữ cảnh mà không làm mất nội dung cơ bản.

Lấy ví dụ từ tài liệu:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Bố cục này minh họa cách sử dụng các Tuyến song song để hiển thị đồng thời bảng điều khiển của người dùng và nhóm trên cùng một chế độ xem bằng cách sử dụng "các vị trí" có tên, một tính năng có nguồn gốc từ phương pháp định tuyến mới này.

3.3 Lợi ích: Xem nhiều trang, Kết xuất có điều kiện, Điều hướng độc lập:

Ưu điểm của các tuyến đường song song là đa dạng. Như đã nhấn mạnh, họ cho phép:

"kết xuất đồng thời một hoặc nhiều trang trong cùng một chế độ xem có thể được điều hướng độc lập".

Ngoài ra, chúng có thể được tận dụng để hiển thị trang có điều kiện, do đó cung cấp mức độ linh hoạt và năng động chưa từng có cho các ứng dụng web.

Về bản chất, với sự ra đời của Parallel Routes, các nhà phát triển web hiện được trang bị tốt hơn để xây dựng các giao diện web phức tạp, năng động và thân thiện với người dùng, được thiết kế riêng cho nhu cầu phát triển của web hiện đại.

4. Cách hoạt động của các tuyến đường song song

Tìm hiểu sâu hơn về Parallel Routes cho thấy Next.js 13.3 được xây dựng thông minh như thế nào. Chúng ta hãy đi qua các chi tiết từng bước.

4.1 Giới thiệu "Slot" và Quy ước @folder:

Khái niệm "khe" nằm ở trung tâm của Parallel Routes. Hãy coi các vị trí là khu vực được chỉ định có thể hiển thị các trang hoặc phần khác nhau trên trang web của bạn.

Quy ước @folder là phương pháp được sử dụng để thiết lập các vị trí này, bằng chứng là ghi chú của tài liệu:

"Các tuyến song song sử dụng các 'khe' được đặt tên này, được xác định bằng phương thức @folder."

• Giải thích mã:

  
  

  • Cấu trúc thư mục cho các tuyến song song: Hãy xem xét ví dụ này:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Tại đây, '@user' và '@team' đóng vai trò là nơi chứa các nội dung khác nhau, cho phép chúng tôi thiết kế trang web của mình linh hoạt hơn.

    
    

  • Cách bố cục sử dụng các vị trí làm chỗ dựa: Dựa trên tài liệu, bố cục trong cùng một đoạn tuyến đường có thể sử dụng các vị trí này làm chỗ dựa. Đây là một ví dụ rõ ràng:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Lưu ý: Trong đoạn mã trên, hàm getCurrentUserType() được sử dụng để xác định loại người dùng, từ đó xác định xem vị trí user hoặc team có được hiển thị hay không.

    
    

• Vị trí định tuyến ẩn so với ẩn: Một trong những điểm mạnh của định tuyến Next.js là tính linh hoạt của nó. Mặc dù '@user' và '@team' trong ví dụ của chúng tôi là các vị trí rõ ràng mà chúng tôi xác định (được liên kết trực tiếp với @folder ), nhưng cũng có một vị trí ẩn hoặc tự động.

  
  

• Các tài liệu giải thích rằng

  " children là loại vị trí tự động này và chúng tôi không cần liên kết nó với @folder . Do đó, dashboard/page.js hoạt động giống như dashboard/@children/page.js ."

Bằng cách nắm bắt kỹ lưỡng cách hoạt động của Parallel Routes, các nhà phát triển có thể tối ưu hóa khả năng của Next.js 13, tạo ra các trang web trực quan và dễ thích ứng hơn.

5. Hướng dẫn từng bước về cách sử dụng các tuyến đường song song

5.1 Thiết lập ứng dụng Next.js mới

Bắt đầu bằng cách tạo một ứng dụng Next.js mới:

 npx create-next-app@latest parallel-routes

Điều hướng đến thư mục của ứng dụng mới được tạo:

 cd parallel-routes

Khởi động máy chủ phát triển:

 yarn dev

5.2 Cấu trúc ứng dụng

Trong thư mục dự án, tạo các thư mục và tệp sau:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Tạo Comps và mô phỏng tải dữ liệu

Trong app/@folder1/page.js , chúng tôi sẽ tạo thành phần để hiển thị và mô phỏng thời gian tải để hiểu trình tự trực quan trong đó các thành phần tải:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

Tương tự, trong app/@folder2/page.js :

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

Thời gian tải mô phỏng này cho phép bạn đánh giá trực quan khả năng của các tuyến đường song song.

5.4 Cập nhật mã bố cục

Trong app/layout.js , điều chỉnh mã bố cục để phù hợp với hai thư mục:

Trước:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Sau đó:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

Vui lòng tạo kiểu bố cục tốt nhất có thể để dễ đọc hơn

5.5 Thêm trạng thái tải

Tài liệu Next.Js nói rằng:

Tệp đặc biệt loading.js giúp bạn tạo Loading UI có ý nghĩa với React Suspense . Với quy ước này, bạn có thể hiển thị trạng thái tải tức thì từ máy chủ trong khi tải nội dung của đoạn tuyến đường. Nội dung mới được tự động hoán đổi sau khi quá trình kết xuất hoàn tất.

Đối với mỗi thành phần (thư mục1 và thư mục2), chúng tôi sẽ tạo trạng thái tải. Cấu trúc thư mục của bạn sẽ như thế này:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Sửa đổi trang

Điều chỉnh nội dung của app/page.js .

Sửa đổi này đảm bảo rằng trang chính không hiển thị gì, để cho các tuyến đường song song tỏa sáng:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

từ chối trách nhiệm

Trong khi thực hành với các tuyến đường song song, tôi phát hiện ra rằng tải lại nóng không hiển thị các tuyến đường như mong đợi. Tôi chưa điều tra vấn đề này, vì vậy tôi không thể cho bạn biết chính xác vấn đề là gì. Nếu bạn gặp phải điều này, chỉ cần khởi động lại máy chủ phát triển để phản ánh các thay đổi.

Phần kết luận

Các tuyến song song, được giới thiệu trong Next.js 13.3, đã đánh dấu một bước tiến đáng kể trong lĩnh vực phát triển web.

Trước khi thành lập, các nhà phát triển phải đối mặt với những thách thức trong việc hiển thị đồng thời nhiều phân đoạn của trang web, với định tuyến truyền thống mang lại trải nghiệm tuyến tính hơn.

Với các tuyến song song, Next.js cung cấp một cách tiếp cận sáng tạo cho thiết kế web động, cho phép hiển thị đồng thời nhiều trang trong một chế độ xem.

Tính năng mạnh mẽ này không chỉ cung cấp trải nghiệm người dùng nâng cao mà còn tạo điều kiện thuận lợi cho các bố cục phức tạp và kết xuất có điều kiện, vượt qua ranh giới của thiết kế ứng dụng web hiện đại.

Bằng cách làm theo hướng dẫn chi tiết được cung cấp ở trên, các nhà phát triển có thể đi sâu vào hoạt động của các tuyến song song, từ việc hiểu các khái niệm cốt lõi như "khe" và quy ước '@folder' đến triển khai thực tế bằng cách sử dụng khung Next.js.

Mặc dù có thể có một số vấn đề, chẳng hạn như sự cố tải lại nóng đã được ghi nhận, nhưng tính linh hoạt và tính năng động được thêm vào các ứng dụng web bằng các tuyến đường song song khiến cho quá trình học tập trở nên đáng giá.

Khi bối cảnh kỹ thuật số tiếp tục phát triển, các công cụ và tính năng như thế này chắc chắn sẽ đóng vai trò then chốt trong việc định hình tương lai của sự phát triển web.

Một lần nữa, xin cảm ơn sự kiên nhẫn và cống hiến của bạn.

Có thông tin phản hồi hoặc câu hỏi? Hãy chia sẻ thoải mái. Mỗi giọng nói đều tăng thêm giá trị.

Kết nối với tôi trên:

cộng đồng dev.to @leandro_nnz cộng đồng hackernoon.com @leandronnz hashnode.com leandronnz twitter.com @digpollution

Cho đến lần sau, chúc bạn viết mã vui vẻ!

Người giới thiệu

Bạn có thể tìm thấy mã đầy đủ trong repo này tại đây .

Tài liệu Next.js chính thức tại đây .

Để xây dựng bài viết này, tôi đã sử dụng StackEdit .

Ảnh của Markus Spiske trên Bapt