hovanban
Well-known member
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.
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."
2. Hướng dẫn từng bước về cách sử dụng các tuyến đường song song
2.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:
Điều hướng đến thư mục của ứng dụng mới được tạo:
Khởi động máy chủ phát triển:
2.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:
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:
Tương tự, trong app/@folder2/page.js :
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.
2.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:
app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js
app/@folder1/loading.js
app/@folder2/loading.js
2.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:
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.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
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.
- Cấu trúc thư mục cho các tuyến song song: Hãy xem xét ví dụ này:
- 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
2. Hướng dẫn từng bước về cách sử dụng các tuyến đường song song
2.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-routesKhởi động máy chủ phát triển:
yarn dev2.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.js5.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.
2.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:
Đố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> }2.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.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn