Làm chủ Next.js từ kinh nghiệm thực chiến của các anh tài công nghệ Sun*

Trong bối cảnh công ty đang liên tục đẩy mạnh mục tiêu đồng hành cùng business khách hàng thông qua hàng loạt giải pháp và sáng kiến sáng tạo, việc sẵn sàng học hỏi, linh hoạt công nghệ giúp sản phẩm trở nên vượt trội hơn so với kỳ vọng của khách hàng không còn là lựa chọn, mà đã trở thành một nhiệm vụ cấp thiết. Đối với các lập trình viên Sun*, hiểu và sử dụng thành thạo các ngôn ngữ trong Tech White Paper được xem là một trong những hành động mục tiêu, tăng khả năng làm chủ sản phẩm, từ đó thể hiện rõ hơn vai trò đồng hành với business khách hàng của một Digital Creative Studio thực thụ. 

Đôi nét về Next.js

Next.js là một framework phát triển web dựa trên React, cung cấp các tính năng mạnh mẽ như Server-Side Rendering (SSR), Static Site Generation (SSG) và nhiều tính năng khác giúp tăng tốc độ tải trang và nâng cao trải nghiệm người dùng. Với sự hỗ trợ từ cộng đồng React đông đảo và nhiều thư viện được phát triển liên tục, Next.js ngày càng trở thành lựa chọn hàng đầu của các lập trình viên web hiện đại. 

Next.js hiện nằm trong nhóm các công nghệ mũi nhọn của Sun*. Sức hấp dẫn và độ phổ biến của Next.js là không bàn cãi. Nhưng khả năng tối ưu hóa framework này, áp dụng thành công trong công việc như thế nào mới là điều cần thảo luận thêm. Đó là lý do, Next.js được lựa chọn là framework tiếp theo được đề cập đến trong series “Chinh phục công nghệ” của Sun* News. 

Để trả lời cho câu hỏi tối ưu hóa hiệu suất khi sử dụng Next.js như thế nào, chúng ta sẽ cùng nhau gặp gỡ 4 “anh tài” Next.js của Sun*, những người đã có nhiều kinh nghiệm thực chiến và nỗ lực không ngừng khai phá tiềm năng của framework này qua các dự án. Họ sẽ giúp các bạn có thêm những góc nhìn cụ thể và bí quyết tiên tiến nhất khi áp dụng Next.js vào công việc.

Xuân Thắng (CEV03): “Đơn giản và phức tạp là 2 thứ tồn tại song song trong Next.js, bạn cần nắm vững kiến thức trước khi áp dụng.”

Tại thời điểm Next.js ra mắt, nó cung cấp rất nhiều tính năng giải quyết được hạn chế của React (bản thân mình vốn rất thích React), đó là lý do vì sao mình lựa chọn Next.js cho các dự án chinh chiến và hứng thú khi sử dụng framework này. 

Về cơ bản, Next.js sẽ dễ tiếp cận đối với các bạn đã có kiến thức sẵn về React, vì cách làm việc với Next.js sẽ không quá khác biệt so với React thuần. Bản thân Next.js có ưu điểm nổi bật là hỗ trợ giải quyết nhiều vấn đề kĩ thuật như: cung cấp SSR - tối ưu cho SEO, routing đơn giản hơn React thuần, tích hợp sẵn API Routes và nhiều vấn đề khác. Điểm cộng nữa là Next.js có một cộng đồng lớn có thể hỗ trợ bạn khi gặp issue, và cũng có rất nhiều thư viện được cộng đồng cung cấp để bạn tham khảo. 

Càng đào sâu, các bạn sẽ càng thấy Next.js có rất nhiều thứ cần phải nắm vững. Vì nó cung cấp các tính năng hỗ trợ nhiều hơn nhiều so với React thuần, nên để có thể hiểu và sử dụng thuần thục các khía cạnh và vấn đề của Next.js các bạn sẽ cần có thời gian để trải nghiệm và nghiên cứu. 

Next.js hiện tại vẫn là một framework được tính là tuổi đời còn trẻ, với sự hỗ trợ của cộng đồng cũng như tài trợ của nhiều tổ chức lớn, vẫn còn rất nhiều đất để phát triển. Với việc cung cấp nhiều tính năng, Next.js vẫn là một lựa chọn hàng đầu đối với các dự án sử dụng React, tuy nhiên cũng vì độ phức tạp của nó, Next.js có thể sẽ phải cải thiện hơn để dễ tiếp cận hơn.

Đối với các bạn dự định học Next.js, mình có 1 số lời khuyên như sau:

• Trước tiên, các bạn cần nắm vững React trước như là một nền tảng cho bản thân để có kiến thức nền vững chắc khi tiếp cận với Next.js.
• Tiếp theo là cần kinh nghiệm: Vì Next.js có rất nhiều thứ cần phải nắm, các bạn nên làm nhiều để có thể va chạm với các vấn đề, từ đó thực hành xử lý giải quyết các vấn đề xuất hiện. Việc thực chiến sẽ giúp bạn hiểu Next dễ hơn và giúp bạn nhớ lâu hơn.
• Một lời khuyên đối với các bạn mới là hãy từ từ tìm hiểu và nắm vững từng phần một của Next.js: Next.js có thể đơn giản, đôi khi rất phức tạp, nhưng khi bạn nắm vững các cấu trúc của Next.js, bạn sẽ biết phương án có thể xử lí khi gặp vấn đề.

Đức Duy (CEV02): "Làm tốt những điều cơ bản và để ý bảo mật"

Khi nghe 1 framework có tích hợp React.js - khai sinh bởi Facebook thì ai cũng sẽ hứng thú thôi nhỉ?! Mình cũng bắt đầu với Next.js từ sự hứng thú đó!  

Ưu điểm mình thích nhất của Next.js là app router. Hồi đang học React.js, mình thấy việc cài đặt router khá rắc rối và mất thời gian, còn với app router thì mọi thứ trở nên rất dễ dàng và dễ làm quen với người mới. Nhược điểm duy nhất với mình là cần server Node.js để vận hành, điều này làm tăng chi phí và triển khai phức tạp hơn.

Next.js vốn mang lại hiệu suất cao, nên ngay cả khi bạn chỉ code bình thường, ứng dụng Next.js của bạn cũng đã rất nhanh, nên vấn đề hiệu suất hầu hết là những vấn đề chung ở cả React.js.

Mình từng tham gia 1 dự án mà trang chủ load xong đã tốn khoảng 10s, sau đó mọi thao tác đều giật lag. Sau khi điều tra thì có nhiều vấn đề, 2 nguyên nhân chính. 1 là phần table ngốn rất nhiều html, số thẻ html riêng trong table đã lên tới vài trăm nghìn. Nguyên nhân thứ 2 là nhiều hàm fetch thực hiện bởi useEffect với nhiều dependencies, do quản lý không tốt dẫn đến useEffect chạy vô số lần.

Giải pháp là, với table phải áp dụng virtualize, bạn có thể tìm hiểu thêm bằng cách search từ khoá như "react virtualized", hiểu đơn giản thì thay vì render 1 lúc toàn bộ html, giờ chỉ scroll tới đâu mới render tới đó, thư viện virtualize có nhiều nhưng không phải lúc nào UI cũng áp dụng trực tiếp được, còn tuỳ thuộc UI, bạn nên code "tay" giúp hiểu cách hoạt động để với UI nào cũng làm được, nó không chỉ áp dụng cho table, mà còn cả list, masonry, thậm chí cả với pdf viewer. Còn với useEffect, giải pháp là hạn chế fetch dữ liệu cách này, cái hay là nếu bạn có nhiều component cần gọi 1 hàm fetch, chỉ cần 1 useEffect duy nhất kiểm tra dependencies là các params thay đổi thì fetch, nhưng với hơn 10 dependencies thì sao? Thay vào đó hãy làm cơ bản là tạo 1 hàm fetch và gọi khi cần, dù có thể phải truyền qua nhiều lớp component, gửi vào nhiều params, nhưng chắc chắn sẽ không gặp lỗi, và khi tìm kiếm cũng dễ hơn.

Hiện tại, cộng đồng Next.js rất đông đảo, liên tục được cập nhật tính năng mới nên chắc chắn tương lai đây vẫn là framework top đầu cho front-end. Mình đang mong chờ Next.js phát triển thêm cho PWA, và chắc chắn là cả AI nữa.

Với chatGPT thì mọi người có thể học Next.js rất dễ dàng, trong quá trình đọc tài liệu có gì không hiểu cứ hỏi chatGPT, kèm theo là làm demo để hiểu sâu nhớ lâu nhé! 

Văn Hưng (CEV10): “Next.js nổi bật với khả năng SSR, nhưng cần cẩn trọng khi sử dụng SSR cho mọi trang.”

Mình bắt đầu tiếp cận Next.js khi tìm kiếm một giải pháp giúp tối ưu hóa SEO cho ứng dụng React. Lúc đó, mình nhận ra việc render phía server (Server Side Rendering - SSR) là điều mà React không xử lý hiệu quả. Next.js nổi bật với khả năng SSR, SSG (Static Site Generation), cùng với hệ thống routing linh hoạt, đây là yếu tố đã thu hút mình tìm hiểu sâu hơn về framework này. 

Điều khiến mình hứng thú với Next.js là sự linh hoạt của nó khi hỗ trợ cả SSR lẫn SSG, giúp ứng dụng có khả năng load nhanh hơn và SEO tốt hơn. Hơn nữa, hệ thống routing tích hợp sẵn và việc hỗ trợ tích hợp API Routes cũng giúp đơn giản hóa cấu trúc dự án mà không cần phải cài đặt nhiều công cụ phụ trợ. Bên cạnh đó, Next.js có khả năng mở rộng tốt và dễ dàng tích hợp với nhiều công nghệ khác như TypeScript, GraphQL,...

Mình đã từng thành công khi áp dụng Next.js tại dự án X-Table - từng được đề cử là dự án của năm. Dự án đã áp dụng thành công Next.js cho phía site user (consumer) đặt hàng, đây là 1 hệ thống lớn cần chịu tải nhiều, việc áp dụng và đặt Next.js là core framework giúp hệ thống tối ưu tốt mặt SEO, chịu tải tốt cũng như tăng khả năng scale trong tương lai. SSR, SSG cùng với đó là tối ưu hình ảnh với next/image giúp trang load nhanh hơn, trải nghiệm người dùng mượt mà hơn. 

1 số nhược điểm khác khi dùng Next.js: 

• Quá trình build có thể trở nên phức tạp với các ứng dụng lớn.
• Khả năng custom quá sâu đôi khi cần nhiều công sức, một số tính năng nâng cao cần thời gian làm quen, đặc biệt khi mới bắt đầu.
• SSR có thể khiến server chịu tải cao hơn nếu không tối ưu hợp lý.

Next.js có tiềm năng rất lớn trong tương lai, nhất là khi xu hướng JAMstack và Static Site Generation tiếp tục phát triển. Việc hỗ trợ cho React Server Components và khả năng xử lý edge rendering sẽ càng làm Next.js trở thành lựa chọn hàng đầu cho các ứng dụng web phức tạp. Next.js nên tiếp tục phát triển thêm các tính năng giúp tối ưu hóa hơn nữa cho edge computing và micro-frontends. 

Bí kíp nhanh nhất để học Next.js là bắt đầu từ tài liệu chính thức của nó và thử xây dựng một dự án nhỏ từ đầu đến cuối, chẳng hạn như blog cá nhân hoặc một trang tĩnh. Sau đó, hãy khám phá dần các tính năng nâng cao như SSR, SSG, và API Routes. Việc kết hợp học qua thực hành dự án thực tế sẽ giúp các bạn tiếp thu nhanh hơn rất nhiều.

Trần Đại (CEV12): “Với tầm nhìn hoàn thiện kiến trúc React full-stack architecture, Next.js luôn là sự lựa chọn hàng đầu trong nhiều năm tới”

Mình may mắn được tiếp xúc với Next.js từ đầu năm 2019, được tham gia vào nhóm tiên phong của công ty để khám phá framework mới. Điều khiến mình hứng thú với framework này đó chính là, đối với một full-stack React framework, Next.js cho bạn khả năng làm tất cả mọi thứ để phát triển một trang Web hiện đại một cách nhanh chóng. Next.js team luôn đi đầu trong việc phát triển các tính năng mới nhất từ React, mang đến những trải nghiệm công nghệ mới tuyệt vời. Thêm nữa, document cực kì chi tiết và cộng đồng vô cùng rộng lớn giúp mọi developer tiếp cận rất nhanh.

Điểm mạnh nhất của Next.js đến từ tính năng đa dạng, ổn định, luôn dẫn đầu xu hướng, tài liệu chi tiết (có cả tutorial cho người mới), đầy đủ các ví dụ từ GitHub chính chủ và cộng đồng developer hùng hậu. Trang chủ và GitHub chính chủ Next.js là tất cả những gì bạn cần để trở thành chuyên gia Next.js. 

Trong những năm gần đây, mình đều ưu tiên chọn Next.js cho team dự án. Dự án gần đây nhất bọn mình đã áp dụng thành công kiến trúc mới nhất từ Next.js là Next.js app router, được trải nghiệm thực tế các tính năng mới như React server component, route handler, server action, ... mang đến cho web của bọn mình performance cực kì cao cũng như cảm giác "code rất sướng tay".

Next.js vẫn đang dẫn đầu trong lĩnh vực Web framework, với tầm nhìn hoàn thiện kiến trúc React full-stack architecture, mình chắc chắn rằng Next.js luôn là sự lựa chọn hàng đầu trong nhiều năm tới. Bạn hãy thử áp dụng theo trình tự lí thuyết - thực hành - thực chiến và mình tin chắc bạn sẽ yêu Next.js.

Kết

Qua kinh nghiệm của 4 chuyên gia tại Sun Asterisk, có thể thấy Next.js không chỉ mang lại nhiều giải pháp mạnh mẽ cho các vấn đề kỹ thuật như SSR, SEO và routing, mà còn đóng vai trò quan trọng trong việc tối ưu hóa trải nghiệm người dùng. Tuy nhiên, để chinh phục Next.js, các lập trình viên cần nắm vững React trước, kết hợp lý thuyết với thực hành và liên tục cập nhật các tính năng mới.

Nếu bạn đang tìm kiếm một framework mạnh mẽ để phát triển các ứng dụng web hiện đại, Next.js chắc chắn là một sự lựa chọn đáng cân nhắc. Hãy bắt đầu từ những dự án nhỏ và dần dần khám phá các tính năng nâng cao của Next.js, để bạn cũng có thể chinh phục framework này một cách dễ dàng.