Next.js xử lý nhiều hoạt động tối ưu hoá trong ứng dụng React của bạn nên bạn không phải
Next.js là một khung React cố định, tích hợp 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ẽ đề cập ngắn gọn về 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 một cách 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 những hướng dẫn này sẽ giải thích chi tiết hơn và cho bạn biết cách sử dụng chúng để xây dựng trải nghiệm nhanh và hiệu quả.
Có nhiều tính năng tối ưu hoá có thể được thêm vào các trang web React nói chung cũng hoạt động hiệu quả đối với các ứng dụng được tạo bằng Next.js. Chúng tôi sẽ không đề cập đến những vấn đề này vì trọng tâm là nội dung mà Next.js cung cấp cụ thể. Để tìm hiểu thêm về các phương thức tối ưu hoá chung của React, hãy xem Bộ sưu tập phản ứng 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ù rất mạnh mẽ, nhưng React đặc biệt là một thư viện giao diện người dùng. Nhiều nhà phát triển cung cấp thêm công cụ như bộ gói mô-đun (ví dụ: webpack) và bộ chuyển đổi (ví dụ: Babel) để có được một chuỗi công cụ xây dựng hoàn chỉnh.
Trong Bộ sưu tập phản ứng, chúng tôi áp dụng phương pháp sử dụng Tạo ứng dụng React (CRA) để tăng tốc nhanh các ứng dụng React. CRA giúp loại bỏ sự rắc rối khi thiết lập ứng dụng React bằng cách cung cấp một chuỗi công cụ tạo bản dựng hoàn chỉnh chỉ với một lệnh duy nhất.
Mặc dù có một số phương thức tối ưu hoá mặc định được tích hợp trong CRA, nhưng công cụ này hướng đến việc thiết lập đơn giản và dễ hiểu. Các nhà phát triển có quyền lựa chọn để quyết định xem có từ chối 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ó một phương pháp khác. API 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 mong muốn, nhưng lại gặp khó khăn khi thiết lập, chẳng hạn như:
- Kết xuất phía máy chủ
- Phân tách mã tự động
- Tìm nạp trước tuyến đường
- Định tuyến hệ thống tệp
- Định kiểu CSS trong JS (
styled-jsx)
Thiết lập
Để tạo ứ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
Nội dung nhúng sau đây hiển thị cấu trúc thư mục của một ứng dụng Next.js mới.
- Nhấp vào Remix để chỉnh sửa (Remix) để 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
Fullscreen
(Toàn màn hình).
Xin 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. 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 với một thành phần duy nhất là nav.js,
đã được nhập vào index.js. Theo mặc định, mọi dữ liệu 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 việc phân tách mã tự động.
Hơn nữa, mỗi lượt tải trang ban đầu trong Next.js đều hiển thị 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 từ máy chủ.
Đây chỉ là một vài trong số rất nhiều tính năng được Next.js tự động cung cấp. Nhiều tệp có thể tuỳ chỉnh và sửa đổi cho nhiều trường hợp sử dụng.
Tiếp theo là gì?
Dự định chơi chữ Punk 😛
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 Next.js cụ thể:
- Định tuyến quá trình tìm nạp trước để tăng tốc việc di chuyển trang
- Phân phát trang kết hợp và trang chỉ dành cho AMP để tải nhanh hơn qua các công cụ tìm kiếm
- Các thành phần phân tách mã bằng tính năng nhập động để giảm mức sử dụng JavaScript