Next.js đảm nhận nhiều hoạt động tối ưu hoá trong ứng dụng React để bạn không phải làm việc đó
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 cao 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 do 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 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à cho bạn biết cách sử dụng các tính năng đó để xây dựng trải nghiệm nhanh và hiệu quả.
Có nhiều cách tối ưu hoá có thể được thêm vào các trang web React nói chung, cũng sẽ hoạt động cho các ứng dụng được xây dựng bằng Next.js. Chúng tôi sẽ không đề cập đến những nội dung 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 tính năng 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 phương pháp dựa trên thành phần. Mặc dù mạnh mẽ, nhưng React là một thư viện giao diện người dùng cụ thể. Nhiều nhà phát triển sử dụng thêm các công cụ như trình đóng gói mô-đun (ví dụ: webpack) và trình chuyển đổi cú pháp (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 đã áp dụng phương pháp sử dụng Tạo ứng dụng React (CRA) để nhanh chóng tạo ứng dụng React. CRA giúp bạn dễ dàng thiết lập ứng dụng React bằng cách cung cấp một chuỗi công cụ tạo hoàn chỉnh chỉ bằng một lệnh.
Mặc dù có một vài tính năng tối ưu hoá mặc định được tích hợp vào CRA, nhưng công cụ này nhằm mục đích cung cấp một thiết lập đơn giản và dễ hiểu. Nhà phát triển có thể quyết định xem có nên loại bỏ và tự sửa đổi cấu hình hay không.
Next.js (cũng có thể dùng để tạo ứng dụng React mới) lại có cách tiếp cận khác. Thư viện 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 gặp khó khăn khi thiết lập, chẳng hạn như:
- Kết xuất 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
- Tạo 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 đó, chuyển đến thư mục và khởi động máy chủ phát triển:
cd new-app
npm run dev
Nội dung 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 Phối 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 View App (Xem ứng dụng). Sau đó, nhấn vào biểu tượng
Fullscreen (Toàn màn hình)
.
Hãy 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. Khi bạn tạo một tệp mới trong thư mục này, chẳng hạn như about.js, một tuyến đường mới (/about) sẽ tự động được tạo.
Bạn cũng có thể tạo và sử dụng các thành phần như mọi ứng dụng React 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 vào index.js. Theo mặc định, mọi lệnh nhập được dùng trong Next.js chỉ được tìm nạp khi trang đó được tải, mang lại lợi ích của việc 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 Công cụ cho nhà phát triển, 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ố nhiều tính năng mà Next.js tự động cung cấp. Nhiều mẫu 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ột chút 😛
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ìm nạp 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ỉ có AMP để tải nhanh hơn từ các công cụ tìm kiếm
- Tách mã các thành phần bằng lệnh nhập động để giảm bớt dấu vết JavaScript