Next.js xử lý nhiều hoạt động tối ưu hoá trong ứng dụng React để bạn không phải
Next.js là một khung React có sẵn một số tính năng tối ưu hoá hiệu suất. Ý tưởng chính đằng sau khung này là đảm bảo các ứng dụng khởi động và duy trì hiệu suất tốt nhất có thể bằng cách đưa các chức năng này vào theo mặc định.
Phần giới thiệu này sẽ trình bày ngắn gọn nhiều tính năng mà khung này cung cấp ở cấp cao. Các hướng dẫn khác trong bộ sưu tập này sẽ khám phá các tính năng này chi tiết hơn.
Bạn sẽ học được gì?
Mặc dù Next.js cung cấp một số tính năng tối ưu hoá hiệu suất theo mặc định, nhưng các hướng dẫn này nhằm giải thích chi tiết hơn về các tính năng đó và hướng dẫn bạn cách sử dụng các tính năng đó để tạo ra trải nghiệm nhanh chóng và hiệu quả.
Nhìn chung, có nhiều tính năng tối ưu hoá có thể được thêm vào các trang web React và cũng sẽ hoạt động cho các ứng dụng được tạo bằng Next.js. Chúng tôi sẽ không đề cập đến các tính năng này vì trọng tâm là những gì Next.js cung cấp cụ thể. Để tìm hiểu thêm về các phương pháp tối ưu hoá chung cho React, hãy xem bộ sưu tập React của chúng tôi.
Next.js khác với React như thế nào?
React là một thư viện giúp bạn dễ dàng xây dựng giao diện người dùng bằng cách sử dụng phương pháp dựa trên thành phần. Mặc dù mạnh mẽ, nhưng React lại là một thư viện giao diện người dùng. Nhiều nhà phát triển thêm các công cụ bổ sung như trình tạo gói mô-đun (ví dụ: webpack) và trình biên dịch chuyển đổi (ví dụ: Babel) để có một chuỗi công cụ xây dựng hoàn chỉnh.
Trong bộ sưu tập React, chúng tôi đã sử dụng phương pháp Tạo ứng dụng React (CRA) để nhanh chóng khởi động các ứng dụng React. CRA giúp bạn thiết lập ứng dụng React một cách dễ dàng bằng cách cung cấp một chuỗi công cụ xây dựng hoàn chỉnh chỉ bằng một lệnh.
Mặc dù có một số tính năng tối ưu hoá mặc định được tích hợp sẵn vào CRA, nhưng công cụ này nhằm cung cấp một quy trình thiết lập đơn giản và dễ hiểu. Nhà phát triển có thể tự quyết định việc truy xuất và chỉnh sửa cấu hình.
Next.js cũng có thể được dùng để tạo một ứng dụng React mới, nhưng lại sử dụng một phương pháp khác. Công cụ này ngay lập tức cung cấp một số tính năng tối ưu hoá phổ biến mà nhiều nhà phát triển muốn có nhưng khó thiết lập, chẳng hạn như:
- Hiển thị phía máy chủ
- Tự động phân tách mã
- Tìm nạp trước tuyến đường
- Định tuyến hệ thống tệp
- Kiểu CSS-in-JS (
styled-jsx)
Thiết lập
Để tạo một ứng dụng Next.js mới, hãy chạy lệnh sau:
npx create-next-app new-app
Sau đó, hãy chuyển đến thư mục và khởi động máy chủ phát triển:
cd new-app
npm run dev
Phần nhúng sau đây cho thấy cấu trúc thư mục của một ứng dụng Next.js mới.
- Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh
.
Lưu ý rằng thư mục pages/ được tạo bằng một tệp duy nhất: index.jsx. Next.js tuân theo phương pháp định tuyến hệ thống tệp, trong đó mỗi trang trong thư mục này được phân phát dưới dạng một tuyến riêng biệt. Việc tạo một tệp mới trong thư mục này, chẳng hạn như about.js, sẽ tự động tạo một tuyến mới (/about).
Bạn cũng có thể tạo và sử dụng các thành phần như bất kỳ ứng dụng React nào khác. Thư mục components/ đã được tạo bằng một thành phần duy nhất là nav.js. Thành phần này đã được nhập trong index.js. Theo mặc định, mọi lệnh nhập được sử dụng trong Next.js chỉ được tìm nạp khi trang đó được tải, mang lại lợi ích của tính năng phân tách mã tự động.
Hơn nữa, mọi lượt tải trang ban đầu trong Next.js đều được kết xuất phía máy chủ. Nếu mở bảng điều khiển Mạng trong DevTools, bạn có thể thấy yêu cầu ban đầu cho tài liệu trả về một trang được kết xuất hoàn toàn phía máy chủ.
Đây chỉ là một vài trong số rất nhiều tính năng mà Next.js tự động cung cấp. Nhiều tính năng có thể tuỳ chỉnh và sửa đổi cho nhiều trường hợp sử dụng.
Tiếp theo là gì?
Chơi chữ 😛
Mọi hướng dẫn khác trong bộ sưu tập này sẽ khám phá chi tiết một tính năng cụ thể của Next.js:
- Tải trước tuyến đường để tăng tốc độ điều hướng trang
- Phân phát trang kết hợp và trang chỉ AMP để tải nhanh hơn từ các công cụ tìm kiếm
- Phân tách mã thành phần bằng tính năng nhập động để giảm mức sử dụng JavaScript