2023.02.16

Tính năng nổi bật NextJS – Phần 2

NextJS phần 2

Như ở phần trước chúng ta đã được giới thiệu về NextJS, để biết vì sao nó đang được sử dụng mạnh mẽ để xây dựng ứng dụng thì ở phần này chúng ta sẽ tìm hiểu về các tính năng của nó nhé.

Tổng quan tính năng nổi bật của NextJS

Tổng quan tính năng NextJS
Tổng quan tính năng NextJS

 

Image Optimization: Tự động tối ưu hóa hình ảnh, cho phép thay đổi kích thước. Chuyển hình ảnh lớn đến các thiết bị nhỏ hơn. Tối ưu hóa hình ảnh theo yêu cầu, điều này không làm giảm tốc độ tải của website.

Image Optimization
Image Optimization

 

Internationalization: Hỗ trợ định tuyến quốc tế từ bản v10.0.0. Bạn có thể cung cấp các ngôn ngữ, ngôn ngữ mặc định và ngôn ngữ miền cụ thể. Nextjs sẽ tự động xử lý việc định tuyến.

NextJS Analytics: Nextjs cung cấp tính năng với chế độ xem Analytics giúp bạn có thông tin về điểm số và dữ liệu thay đổi tổng quan.

Analytics NextJS
Next JS Analytics

 

Zero config: Tự động thực hiện biên dịch và đóng gói, tối ưu hóa cho sản phẩm ngay từ đầu.

Hybrid SSG và SSR: Sử dụng cơ chế Pre-render để build-time và request time ở SSR trong dự án Single.

Hybrid SSG và SSR
Phần SSR

 

Hybrid SSG
Hybrid SSG

 

Incremental Static Regeneration: Next JS cho phép tạo hoặc cập nhật các trang tĩnh sau khi xây dựng website mà không cần phải rebuild

TypeScript Support: Tự động hỗ trợ cấu hình TypeScript và biên dịch

Fast Refresh: Một tính năng cực kỳ hay và thú vị cho phép phản hồi tức thời về các chỉnh sửa được thực hiện trên component mà không làm mất state hiện tại.

File-system Routing: NextJS cung cấp một bộ định tuyến được dựa trên hệ thống các tệp được tạo trong thư mục pages.

System Routing
System Routing

 

  • Khi một file được thêm vào thư mục pages thì nó tự động xem như là 1 route như tên file
  • Có 3 loại route: 

+ Index routes: file named index

+ Nested routes: nested folder in pages

+ Dynamic routes: brackets in file name to match parameter dynamically

Dynamic Route

Dynamic Route
Dynamic Route

 

Dynamic Route 2
Dynamic Route 2

 

Catch all Routes
Catch all Routes

 

Router
Router

 

Route match order

Route match order
Route match order

 

API Routes: Đây là một tính năng thú vị và mạnh mẽ, giúp chúng ta có thể tạo endpoint API, được tạo trong thư mục pages/api/.

Built-In CSS Support: cho phép import CSS file từ file Javascript.

Và còn nhiều tính năng nổi trội khác đang chờ bạn khám phá.

Những ai đang dùng NextJS

  • Tính đến tháng 3/2022 framework đã được sử dụng rộng rãi bao gồm nhiều công ty lớn, website phổ biến.                    
Người dùng NextJS
Người dùng NextJS

 

Bên cạnh đó, tại ở công ty Market Enterprise VN chúng tôi cũng đang sử dụng NextJS để xây dựng trang Landing Pages về Comparison Service và dự án V-Machinery.

Tổng kết

  • Như vậy trong phần này chúng ta cũng đã tìm hiểu qua các tính năng nổi bật của NextJS
  • Ở phần sau, chúng ta sẽ build một blog cơ bản của NextJS nhé.

 

Các bài viết về NextJS :

Phần 1 : Giới thiệu về NextJS

Phần 2: Tính năng nổi bật NextJS

Phần 3: Build Blog đơn giản 

0 Comments
Inline Feedbacks
View all comments