Cách thư mục ứng dụng hoạt động trong Next.js 13
Next.js 13 đã giới thiệu một hệ thống định tuyến mới sử dụng thư mục ứng dụng. Next.js 12 đã cung cấp một cách dễ dàng để xử lý các tuyến thông qua các tuyến dựa trên tệp. Việc thêm một thành phần vào thư mục pages sẽ tự động biến nó thành một tuyến đường. Trong phiên bản mới này, bộ định tuyến dựa trên hệ thống tệp đi kèm với thiết lập tích hợp cho bố cục, định tuyến lồng nhau trong mẫu, giao diện người dùng đang tải, xử lý lỗi cũng như hỗ trợ cho các thành phần máy chủ và phát trực tuyến.
Bài viết này giải thích những tính năng mới này và lý do tại sao chúng lại quan trọng.
Mục Lục
Bắt đầu với Next.js 13
Tạo dự án Next.js 13 của riêng bạn bằng cách chạy lệnh sau trong terminal.
npx create-next-app@latest next13
Thao tác này sẽ tạo một thư mục mới có tên next13 với thư mục ứng dụng mới.
Tìm hiểu thư mục ứng dụng mới
Next.js 12 đã sử dụng trang thư mục để định tuyến, nhưng nó được thay thế bằng ứng dụng/ thư mục trong Next.js 13. trang/ thư mục vẫn hoạt động trong Next 13 để cho phép áp dụng gia tăng. Bạn chỉ cần đảm bảo rằng bạn không tạo tệp trong hai thư mục cho cùng một tuyến đường vì bạn sẽ gặp lỗi.
Đây là cấu trúc hiện tại của thư mục ứng dụng.
Trong thư mục ứng dụng, bạn sử dụng các thư mục để xác định tuyến đường và các tệp bên trong các thư mục này được sử dụng để xác định giao diện người dùng. Ngoài ra còn có các tệp đặc biệt như:
- trang.tsx – Tệp được sử dụng để tạo giao diện người dùng cho một tuyến cụ thể.
- bố trí.tsx – Nó chứa định nghĩa bố cục của tuyến đường và có thể chia sẻ trên nhiều trang. Chúng hoàn hảo cho menu điều hướng và thanh bên. Khi điều hướng, bố cục giữ nguyên trạng thái và không hiển thị lại. Điều này có nghĩa là khi bạn điều hướng giữa các trang có chung bố cục, trạng thái vẫn giữ nguyên. Một điều cần lưu ý là phải có bố cục trên cùng (bố cục gốc) chứa tất cả các thẻ HTML và nội dung được chia sẻ trên toàn bộ ứng dụng.
- mẫu.tsx – Mẫu giống như bố cục tuy nhiên chúng không giữ nguyên trạng thái và được hiển thị lại mỗi khi chúng được sử dụng để tạo trang. Các mẫu hoàn hảo cho các tình huống mà bạn cần một số mã nhất định để chạy mỗi khi thành phần được gắn kết, chẳng hạn như nhập và thoát hoạt ảnh.
- lỗi.tsx – Tập tin này được sử dụng để xử lý các lỗi trong ứng dụng. Nó bao bọc một route với lớp ranh giới lỗi React sao cho khi xảy ra lỗi trong route đó hoặc các con của nó, nó sẽ cố gắng khôi phục từ nó bằng cách hiển thị trang lỗi thân thiện với người dùng.
- đang tải.tsx – Giao diện người dùng đang tải được tải ngay lập tức từ máy chủ khi giao diện người dùng định tuyến tải trong nền. Giao diện người dùng đang tải có thể là màn hình xoay hoặc khung xương. Khi nội dung tuyến đường tải, nó sẽ thay thế giao diện người dùng đang tải.
- không tìm thấy.tsx – Tệp không tìm thấy được hiển thị khi Next.js gặp lỗi 404 cho trang đó. Trong Next.js 12, bạn phải tạo và thiết lập trang 404 theo cách thủ công.
- đầu.tsx – Tệp này chỉ định thẻ đầu cho đoạn tuyến đường mà nó được xác định.
Cách tạo Route trong Next.js 13
Như đã đề cập trước khi các tuyến đường được tạo bằng các thư mục trong ứng dụng/ danh mục. Trong thư mục này, bạn phải tạo một tệp có tên trang.tsx xác định giao diện người dùng của tuyến đường cụ thể đó.
Ví dụ: để tạo một tuyến đường với đường dẫn /Mỹ phẩmbạn sẽ cần phải tạo một ứng dụng/sản phẩm/page.tsx tập tin.
Đối với các tuyến đường lồng nhau như /sản phẩm/bánlồng các thư mục vào trong nhau sao cho cấu trúc thư mục giống như ứng dụng/sản phẩm/bán/page.tsx.
Ngoài một cách định tuyến mới, các tính năng thú vị khác mà thư mục ứng dụng hỗ trợ là các thành phần máy chủ và phát trực tuyến.
Sử dụng các thành phần máy chủ trong thư mục ứng dụng
Thư mục ứng dụng sử dụng các thành phần máy chủ theo mặc định. Cách tiếp cận này làm giảm lượng JavaScript được gửi tới trình duyệt khi thành phần được hiển thị trên máy chủ. Điều này cải thiện hiệu suất.
Xem bài viết này về các phương pháp kết xuất khác nhau trong Next.js để được giải thích sâu hơn.
Một thành phần máy chủ có nghĩa là bạn có thể truy cập các bí mật môi trường một cách an toàn mà phía máy khách không để lộ chúng. Ví dụ: bạn có thể sử dụng quy trình.env.
Bạn cũng có thể tương tác trực tiếp với phần phụ trợ. Không có nhu cầu sử dụng getServerSideProps hoặc getStaticProps vì bạn có thể sử dụng async/await trong thành phần máy chủ để tìm nạp dữ liệu.
Hãy xem xét chức năng không đồng bộ này để tìm nạp dữ liệu từ một API.
async function getData() {
try{
const res = await fetch('https://api.example.com/...');
return res.json();
} catch(error) {
throw new Error('Could not fetch data')
}
}
Bạn có thể gọi nó trực tiếp trên một trang như sau:
export default async function Page() {
const data = await getData();
return <div></div>;
}
Các thành phần máy chủ rất phù hợp để hiển thị nội dung không tương tác. Nếu bạn cần sử dụng hook React, trình xử lý sự kiện hoặc API chỉ dành cho trình duyệt, hãy sử dụng thành phần ứng dụng khách bằng cách thêm lệnh “sử dụng ứng dụng khách” ở đầu thành phần trước khi nhập bất kỳ.
Các thành phần truyền trực tuyến tăng dần trong Thư mục ứng dụng
Truyền trực tuyến đề cập đến việc gửi dần dần các phần của giao diện người dùng đến máy khách cho đến khi tất cả các thành phần được hiển thị. Điều này cho phép người dùng xem một phần nội dung trong khi phần còn lại đang được hiển thị. Để cung cấp cho người dùng trải nghiệm tốt hơn, hãy hiển thị thành phần tải giống như công cụ quay vòng cho đến khi máy chủ hoàn tất hiển thị nội dung. Bạn làm điều này bằng cách sử dụng theo hai cách:
- Tạo ra một đang tải.tsx tệp sẽ được hiển thị cho toàn bộ đoạn tuyến.
export default function Loading() {
return <p>Loading...</p>
}
- Bao bọc các thành phần riêng lẻ bằng ranh giới React Suspense và chỉ định giao diện người dùng dự phòng.
import { Suspense } from "react";
import { Products } from "./Components";export default function Sale() {
return (
<section>
<Suspense fallback={<p>Products...</p>}>
<Products />
</Suspense>
</section>
);
}
Trước khi thành phần Sản phẩm được hiển thị, người dùng sẽ thấy “Sản phẩm…”. Điều này tốt hơn so với một màn hình trống về trải nghiệm người dùng.
Nâng cấp lên Next.js 13
Thư mục ứng dụng mới chắc chắn là một cải tiến từ thư mục trang trước. Nó bao gồm các tệp đặc biệt như bố cục, phần đầu, mẫu, lỗi, không tìm thấy và tải xử lý các trạng thái khác nhau khi hiển thị tuyến đường mà không cần thiết lập thủ công.
Ngoài ra, thư mục ứng dụng cũng hỗ trợ phát trực tuyến và các thành phần máy chủ dẫn đến hiệu suất được cải thiện. Mặc dù các tính năng này rất tốt cho cả người dùng và nhà phát triển, nhưng hầu hết chúng hiện đang ở giai đoạn thử nghiệm.
Tuy nhiên, bạn vẫn có thể nâng cấp lên Next.js 13 vì thư mục trang vẫn hoạt động, sau đó bắt đầu sử dụng thư mục ứng dụng theo tốc độ của riêng bạn.