Next.js là một khung công tác React để kết xuất phía máy chủ, mà những người tạo ra nó trình bày dưới dạng chuỗi công cụ lệnh đơn không cấu hình cho các ứng dụng React.
Khung này cung cấp một cấu trúc chung cho phép bạn dễ dàng tạo một ứng dụng React front-end và quản lý minh bạch kết xuất phía máy chủ. Next.js phiên bản 9.3 đã được tung ra vào thứ Hai với các tính năng mới và một số cải tiến, trong đó chúng ta có thể tìm thấy khả năng tạo các trang web tĩnh làm điểm mới chính.
Có gì mới trong Next.js 9.3?
Với việc phát hành Next.js 9.0, khung giới thiệu khái niệm tối ưu hóa tự động tĩnh. Khi một trang không có yêu cầu chặn phục hồi dữ liệu như getInitialProps, sẽ tự động hiển thị trong HTML một khi nó đã được xây dựng.
Có những trường hợp khác mà bạn có thể muốn tạo một trang bằng HTML tĩnh tại thời điểm biên dịch, ngay cả với các yêu cầu trích xuất dữ liệu chặn. Ví dụ: đây là trường hợp của các trang tiếp thị được cung cấp bởi hệ thống quản lý nội dung (CMS).
Next.js 9.3 giới thiệu hai phương pháp khôi phục dữ liệu mới: getStaticProps và getServerSideProps.
Những phương pháp mới này chúng có nhiều lợi thế hơn so với mô hình getInitialPropsvì có sự phân biệt rõ ràng giữa những gì sẽ trở thành SSG (Thế hệ bên tĩnh) và SSR (Kết xuất phía máy chủ). Chúng là những bổ sung API.
Tất cả các tính năng mới đều tương thích ngược và có thể nuôi dần dần. Không có khấu hao và getInitialProps tiếp tục hoạt động bình thường. Một tham số getStaticPaths đã được thêm vào để có được định tuyến động.
- getStaticProps: cho phép lấy dữ liệu trong quá trình xây dựng;
- getStaticPaths - Chỉ định định tuyến động dựa trên dữ liệu;
- getServerSideProps: cho phép bạn lấy dữ liệu cho từng yêu cầu.
Một thay đổi khác nổi bật so với phiên bản mới này là hỗ trợ chế độ xem trước. Giới thiệu getStaticProps trong Next.js mở ra những khả năng mới, chẳng hạn như sử dụng khả năng kết xuất Next.js theo yêu cầu trong các điều kiện nhất định.
Ví dụ: khi xem trước bản nháp Trong CMS, bạn sẽ muốn bỏ qua kết xuất tĩnh và hiển thị trang theo yêu cầu với nội dung nháp thay vì nội dung đã xuất bản. Bạn muốn Next.js chỉ bỏ qua xây dựng tĩnh trong trường hợp cụ thể này. Theo nhóm Next.js, chế độ xem trước cho phép bạn làm điều này.
Chế độ của xem trước cho phép người dùng bỏ qua trang đã tạo tĩnh để trả lại theo yêu cầu (SSR) trang nháp, ví dụ từ CMS. Tuy nhiên, nó không giới hạn ở một số hệ thống CMS nhất định. Chế độ xem trước tích hợp trực tiếp với getStaticProps và getServerSideProps để nó có thể được sử dụng với bất kỳ loại giải pháp khôi phục dữ liệu nào.
Next.js 9.2 đã thêm hỗ trợ cho CSS tích hợp, nhưng Next.js 9.3 đã thêm hỗ trợ cho Sass. Các biểu định kiểu chung và mô-đun CSS được hỗ trợ, cũng như CSS được nhúng. Next.js hiện hỗ trợ các mô-đun CSS với các tệp Sass sử dụng quy ước đặt tên tệp [name] .module.scss. Không giống như hỗ trợ trước đây có sẵn trong Next.js 5+ với next-sass, các mô-đun Sass và CSS toàn cầu hiện có thể cùng tồn tại.
Mô-đun CSS cho phép bạn quản lý Sass cục bộ bằng cách tự động tạo các tên lớp duy nhất.
Với phiên bản 9.0 từ Next.js, có một trang không được tự động hiển thị trong HTML tĩnh: 404 trang.
Lý do chính đằng sau điều này là trang lỗi cấp dữ liệu 404 được xử lý nhiều hơn so với trang 404. Ví dụ: nó cũng xử lý lỗi. Vì các trang 404 được hiển thị cho các đường dẫn không tồn tại, hiển thị trang theo yêu cầu có thể dẫn đến chi phí cao hơn và tải cao hơn người phục vụ. Phiên bản Framework 9.3 cải thiện mọi thứ và cung cấp tối ưu hóa tĩnh tự động cho 404 trang.
Bây giờ, khi yêu cầu của bạn không bao gồm trang tùy chỉnh error.js, tệp Next.js tự động tạo trang 404 tĩnh và sử dụng nó khi cần phân phối 404. Điều này diễn ra tự động và không cần thay đổi.
Bạn cũng có thể tùy chỉnh trang này. Để thay thế trang 404 mặc định, bạn có thể tạo tệp 404.js.
Nếu bạn muốn biết thêm về nó, bạn có thể tham khảo liên kết sau.