Next.js - một framework JavaScript phổ biến vừa phát hành phiên bản mới nhất, Next.js 14. Bản cập nhật này mang đến một loạt tính năng và cải tiến mới, khiến phiên bản này trở nên mạnh mẽ hơn bao giờ hết. Hãy cùng VietnamWorks inTECH tìm hiểu ngay sau đây nhé!

1. Turbopack 

Một trong những tính năng nổi bật của Next.js 14 là Turbopack. Nó mang lại những cải tiến đáng kể cho việc khởi động local server và cập nhật code bằng tính năng Fast Refresh. Tốc độ khởi động local server có thể nhanh hơn tới 53% và tốc độ update code tăng đáng kể 94%. Điều này đặc biệt có lợi cho các ứng dụng lớn có biểu đồ mô-đun phức tạp, mang lại trải nghiệm lập trình mượt mà và hiệu quả.

Để trải nghiệm điều này, bạn có thể nâng cấp lên Next.js 14 và tạo dự án mới bằng lệnh: npx create-next-app@latest.

2. Server Actions cho Backend Functionality

Next.js 14 giới thiệu Server Actions, một tính năng mạnh mẽ giúp đơn giản hóa việc tạo các route API. Cho phép bạn xác định các chức năng chạy an toàn trên máy chủ, loại bỏ việc tạo route API thủ công. Tính năng này được xây dựng dựa trên các nguyên tắc cơ bản của web như biểu mẫu và API Web FormData, giúp tính năng này có thể dễ dàng truy cập và thân thiện với người dùng.

Thay vì tạo route API theo cách thủ công, bạn có thể xác định một hàm chạy trên máy chủ và gọi nó trực tiếp từ các component react của mình.

Việc thay đổi dữ liệu, hiển thị lại trang hoặc chuyển hướng có thể xảy ra trong một roundtrip network, đảm bảo dữ liệu được hiển thị chính xác trên máy khách, ngay cả khi upstream provider bị chậm. Hơn nữa, bạn có thể soạn và sử dụng lại các action khác nhau trong cùng một route.

Server Actions được tích hợp sâu vào toàn bộ mô hình App Router. Bạn có thể:

  • Xác nhận lại dữ liệu được lưu trong bộ nhớ cache bằng revalidatePath() hoặc revalidateTag()

  • Chuyển hướng đến các route khác nhau thông quaredirect()

  • Đặt và đọc cookie bằng quacookies()

  • Xử lý các optimistic UI Update  với useOptimistic()

  • Bắt và hiển thị lỗi từ máy chủ với useFormState()

  • Hiển thị trạng thái tải trên máy khách với useFormStatus()

3. Partial Prerendering

Partial Prerendering là tính năng tối ưu hóa trình biên dịch giúp nâng cao hiệu suất của Dynamic Content. Nó kết hợp các điểm mạnh của server-side rendering (SSR)  và static-site generation (SSG) mà không gây thêm sự phức tạp. Tính năng này giúp tối ưu hóa quá trình render và giảm thiểu nhu cầu sử dụng runtime và configuration.

Partial Prerendering tạo ra một lớp vỏ tĩnh dựa trên Suspense boundary, thay thế các component dự phòng bằng các thành phần động. Điều này cho phép các thành phần tĩnh phản hồi nhanh chóng mà không cần phải thực hiện các vòng lặp mạng bổ sung.

4. Cải tiến Metadata

Next.js 14 cải thiện khả năng xử lý metadata hay còn gọi là siêu dữ liệu bằng cách tách ra thành blocking và non-blocking metadata. Điều này đảm bảo trải nghiệm người dùng mượt mà hơn thông qua việc gửi siêu dữ liệu cần thiết về chế độ xem, bảng màu và chủ đề trước khi hiển thị trang. Các tùy chọn siêu dữ liệu không dùng nữa đã được thay thế bằng các API mới, nâng cao tính linh hoạt và hiệu suất.

Các tùy chọn siêu dữ liệu sau hiện không được dùng nữa và sẽ bị xóa khỏi metadata trong phiên bản chính thức sắp tới:

  • viewport: Thiết lập mức thu phóng ban đầu và các thuộc tính khác của viewport

  • colorScheme: Đặt các chế độ hỗ trợ (sáng/tối) cho viewport

  • themeColor: Thiết lập màu mà chrome xung quanh viewport sẽ render

Các tùy chọn mới viewport và generateViewport sẽ thay thế các tùy chọn trên. 

VietnamWorks inTECH