Tại sao nên dùng Next.js?

Có nhiều lí do khiến Next.js lại được ưa chuộng và cộng đồng ngày càng rộng lớn cũng như là liên tục được nâng cấp.

Minh chứng cho sự nổi tiếng vượt trội của Next.js là việc sử dụng nó trong những doanh nghiệp lớn, có thể kể như: Netflix Jobs, Tiktok, Hulu, Notion, Auth0, Material UI (MUI), Marvel, Expo, Elastic, Porsche, Hyundai, Ticketmaster, HBO Max, Nike… Kể hoài mà không hết!

Xem showcase của các doanh nghiệp dùng Next.js cho trang web của họ tại đây.

Bởi vậy nhiều khi mọi người thấy con nháy extension của React sáng đèn thì không hẳn là React thuần, mà là Next.js à nha! Cách nhận biết là tìm thẻ div đầu tiên trong body có id là __next.

Rồi, khoe sương sương vậy đủ rồi, còn lại thì là suy nghĩ của mình tại sao nó lại bền vững như vậy nhen

Next.js nổi tiếng bởi nó được xây dựng theo cách mà làm cho trang web xây trên React có tốc độ tải trang cực nhanh!

Điều này không chỉ diễn ra ở phiên bản đã phát hành (built, deployed), mà cả khi trong quá trình xây dựng - hot reload của Next.js cực kì cực kì là nhanh so với React.

Vì vậy mà khi xây trên Next.js, cả developers và users đều vui vẻ 😁.

Next.js hỗ trợ nhiều phương pháp tải trang web tùy theo nhu cầu, có trang tĩnh hoàn toàn, cũng có trang động hoàn toàn, hoặc cả hai. Điều này giúp cho việc tải trang trở nên cực kì nhanh chóng và linh hoạt.

Vâng, không thể bỏ qua, kể cả trong trường hợp bây giờ React đã có Server Component này kia, thì Next.js vẫn đã đi trước một đoạn... rất xa trong việc hỗ trợ SEO trang web.

Next.js 14 hỗ trợ nhiều hàm dựng sẵn (built-in function) cho việc khởi tạo các thẻ metadata. Nghĩa là, không cần lăn tăn phải nhét thẻ này thẻ kia chỗ nào để không bị trùng lặp, thẻ nào là hợp lí, vì Next.js đã lo, bạn chỉ cần điền vào chỗ trống.

Tìm hiểu thêm về metadata với Next.js tại đây: Optimizing: Metadata | Next.js (nextjs.org).

Nói chung là, về SEO website, bạn chỉ cần lo nội dung cho hấp dẫn thôi, còn công nghệ, để Next.js lo.

Next.js tự động tối ưu những thành phần có thể khiến cho trang web của bạn bị chậm, ví dụ như hình ảnh, font chữ, file script...

Có nhiều người mới dùng thử thẻ Image của Next.js và bảo là khó xài, mình xin khẳng định là... cũng khó xài thiệt, nếu mới. Nhưng tin mình, dùng lâu sẽ nghiện! Nó tối ưu ảnh một cách thần kì, ví dụ nhen, cái ảnh 3000x4000 px nặng vài MB, mà khi bạn cần hiện nó trong một thẻ div chỉ 300x400 px, thì Next.js sẽ tự tối ưu, chuyển đổi ảnh thành phiên bản nhỏ hơn, kết hợp caching và cách tải ảnh tối ưu của nó, thì từ việc phải tải một ảnh nặng vài MB, giờ trang web chỉ cần tải một ảnh nhỏ hơn, có thể tới kích thước vài chục KB!

Bạn thử F12 trang web này tại bài viết này và kiểm tra thử tấm hình bên dưới để mường tượng nhen.

Mình sẽ để link gốc ảnh ở đây.

Ngoài ra thì cái cách mà Next.js routing (việc phân trang) bằng thư mục là một thương hiệu của Next.js, nó làm đơn giản hóa vấn đề phân trang web nhưng lại cực kì hiệu quả!

Ví dụ, thư mục của bạn chỉ cần như bên dưới, thì trang web sẽ tự có 2 endpoints là / và /dashboard

Hơn nữa, việc phân trang bằng thư mục kèm tính năng kế thừa layout làm cho việc tận dụng một hoặc nhiều phần UI trở nên cực kì dễ dàng. Thử tưởng tượng bạn chỉ cần cho thanh điều hướng vào một file gọi là layout.js thì các endpoint con của nó đều sẽ có thanh điều hướng đó!

Trong ví dụ này, các trang /dashboard và /dashboard/settings sẽ có chung UI định nghĩa trong file layout.js

Với việc hỗ trợ mạnh mẽ bởi Vercel và cộng đồng Next.js, việc update diễn ra vô cùng thường xuyên với những tính năng mới của React và cả của chính bản thân Next.js

Nếu như những lí do trên chưa đủ thuyết phục, thì đây là lí do cuối!

React cho rằng việc bắt đầu một dự án React mới với một framework hỗ trợ tận răng là một điều vô cùng hợp lí.

Còn nhiều nữa, chờ bạn khám phá đó. Bịnh gì cử?

Bắt đầu tại Next.js by Vercel - The React Framework (nextjs.org)

Và đó là cái đó!