Bạn đã nghe những điều tuyệt vời về Web Framework mới có tên là Next.js, nhưng bạn vẫn không chắc tại sao mọi người lại sử dụng nó.
Một cách để hiểu tại sao bạn nên học Next.js là hiểu nó giải quyết những vấn đề gì. Điều này trực tiếp giải thích tại sao nó trở nên phổ biến như vậy.
Tại sao lại sử dụng Framework?
Giả sử bạn là một công ty khởi nghiệp mới đang cố gắng khởi chạy một trang web. Bạn có thể có một số yêu cầu như:
- Trang Splash với thông tin về sản phẩm
- Giới thiệu về trang mô tả đội
- Các câu hỏi thường gặp
- Thu hút khách hàng tiềm năng thông qua biểu mẫu liên hệ
- Đăng ký nhận bản tin
Không có gì trong những yêu cầu này quy định sự cần thiết của một khuôn khổ. Bạn hoàn toàn có thể đáp ứng những yêu cầu này bằng cách sử dụng HTML, CSS và JavaScript đơn giản.
Tuy nhiên, nếu chúng ta có tầm nhìn xa, chúng ta có thể biết rằng các yêu cầu trong tương lai yêu cầu quy trình xác thực người dùng và sự khởi đầu của sản phẩm SaaS.
Giá trị thực sự của việc sử dụng một khuôn khổ là năng suất của nhà phát triển, kiến thức được chia sẻ, tái sử dụng mã và tạo ra một nền tảng cho tương lai. Nếu chúng ta bắt đầu với React / Next.js, chúng ta có thể đáp ứng các yêu cầu ban đầu một cách dễ dàng và mở đường cho lần lặp tiếp theo của sản phẩm.
React
React đã trở thành tiêu chuẩn công nghiệp để xây dựng các ứng dụng web hiện đại. Trong số 90.000 nhà phát triển được khảo sát bởi Stack Overflow, React là web framework được yêu thích nhất và mong muốn nhất.
Tại sao? Với React, bạn có thể xây dựng mọi thứ từ các trang giật gân tiếp thị đơn giản đến các ứng dụng web chính thức trên quy mô của Facebook. Nó linh hoạt và có thể kết hợp. Các nhà phát triển thích điều này.
Xu hướng React.js Xu hướng này có nghĩa là ngày càng có nhiều nhà phát triển đang học React, và cả JavaScript nữa. Nó trở thành một trong những kỹ năng hot nhất mà các nhà tuyển dụng đang tìm kiếm. JavaScript là ngôn ngữ số 1 được sử dụng theo GitHub.
GitHub Octoberse Đối với các công ty, điều này có nghĩa là bạn có nhiều khả năng tìm được những nhân viên đã biết React. Đối với các nhà phát triển, điều này trở thành một kỹ năng rất có lợi để thêm vào bộ kỹ năng của bạn.
Theo xu hướng NPM, nó vượt xa các web framework khác như Angular và Vue khoảng 5 triệu lượt cài đặt / ngày.
Xu hướng cài đặt NPM Điều này không có nghĩa là React là hoàn hảo. Vì bạn đang tải nội dung phía máy khách, bạn phải đợi gói JavaScript tải trước khi có thể xác định nội dung sẽ hiển thị trên trang. Điều này có thể gây ra vấn đề đối với những người dùng có kết nối chậm hơn.
Thêm vào đó, các công cụ tìm kiếm vẫn gặp khó khăn với việc lập chỉ mục các ứng dụng JavaScript phía máy khách. Nếu bạn lo lắng về Tối ưu hóa Công cụ Tìm kiếm (SEO) và muốn nội dung của bạn được lập chỉ mục nhanh hơn, tốt hơn là gửi đánh dấu từ máy chủ. Nhập Next.js.
Next.js
Next.js giải quyết cả hai vấn đề đó bằng cách sử dụng kết xuất phía máy chủ. Framework của Next cho phép bạn xây dựng mã React có thể mở rộng, hoạt động hiệu quả mà không gặp rắc rối về cấu hình. Đó là lý do tại sao rất nhiều công ty phụ thuộc vào Next cho các ứng dụng sản xuất vận chuyển.
Phương pháp tiếp cận Zero-Config
Để vận chuyển đúng một ứng dụng React hiệu quả, có rất nhiều điều bạn phải làm đúng. Bạn sẽ muốn định cấu hình Babel một cách chính xác để có thể sử dụng các tính năng JavaScript hiện đại, nhưng vẫn hỗ trợ các trình duyệt cũ. Bạn cũng sẽ muốn nhóm tất cả nội dung của mình (ví dụ: nhiều tệp JavaScript) để đưa vào tệp HTML của bạn (sử dụng một cái gì đó như Webpack). Danh sách cứ kéo dài.
Sẽ thật tuyệt nếu không phải lo lắng về điều này phải không?
"Sự mệt mỏi với JavaScript" này đã thúc đẩy việc Create React App (CRA), cải thiện đáng kể trải nghiệm của nhà phát triển khi tạo ra một ứng dụng React mới. Nhưng chúng ta có thể làm tốt hơn không?
Next.js hỗ trợ IE11 và tất cả các trình duyệt hiện đại. Babel được định cấu hình cho bạn, với một cửa thoát hiểm để ghi đè nếu bạn cần. CRA kết hợp tất cả các tệp JavaScript thành một gói duy nhất, trong khi Next.js có hỗ trợ tách mã. Khi tôi truy cập / định tuyến, chúng tôi chỉ tải JavaScript được sử dụng trên trang đó. Hiệu suất tốt hơn! Bạn muốn xử lý định tuyến với CRA? Điều đó sẽ yêu cầu bộ định tuyến phản ứng (hoặc một thư viện tương tự). Next.js có tính năng định tuyến dựa trên hệ thống tệp. Không cần cài đặt thêm!
Trang web tĩnh (Static Site)
Tôi đã đề cập đến Next.js cũng có thể xử lý các trang web tĩnh?
Chạy next build sẽ hiển thị trước các tuyến đường mà không cần tìm nạp dữ liệu vào HTML tĩnh. Bạn cũng có thể sử dụng getStaticProps và getStaticPaths để tạo một trang web tĩnh với dữ liệu động.
Ngoài ra, bạn có thể deloy trong một vài cú nhấp chuột với Verce.
Kết luận
Nextjs có quá nhiều tính năng, thật khó để nắm bắt được phạm vi rộng trong một bài viết. Tôi thực sự khuyên bạn nên xem trang web của họ, thử một ví dụ và xem liệu Next.js có thể giúp bạn xây dựng các ứng dụng web nhanh hơn hay không.
npx create-next-app