Mục lục[Ẩn giấu][Chỉ]
Khi chọn một thư viện hoặc khuôn khổ phần mềm, trải nghiệm của nhà phát triển thường được tính đến.
Khi tôi đề cập đến “trải nghiệm của nhà phát triển”, tôi đang đề cập đến cách các nhà phát triển thực sự thực hiện công việc. Các nhà phát triển chọn thư viện hoặc khung công tác thú vị để sử dụng.
Đây là một trong những lý do chính tại sao chúng ta hiện có các thư viện và khuôn khổ phổ biến nhất. Là nhà phát triển, chúng tôi không phải bắt đầu lại từ đầu khi có các công cụ hiện có được tạo ra để hỗ trợ chúng tôi thực hiện các nhiệm vụ của mình.
Framework là những phần mềm được tạo ra và sử dụng bởi các nhà phát triển để xây dựng các ứng dụng, và NextJS là một trong số đó.
Trong bài đăng này, chúng ta sẽ xem xét Nextjs, các tính năng chính của nó và cách chúng ta có thể sử dụng nó để xây dựng một ứng dụng. Hãy bắt tay ngay vào.
Next.js là gì?
Tiếp theo.js là một khung công tác JavaScript để xây dựng các trang web tĩnh và các ứng dụng trực tuyến dựa trên React một cách nhanh chóng và dễ dàng. Nó cho phép bạn thiết kế các ứng dụng Web tuyệt vời cho nhiều nền tảng, bao gồm Windows, Linux và Mac.
Bạn nên làm quen với khuôn khổ Next.js nếu bạn có ít quen thuộc với phản ứng và muốn tìm hiểu thêm về hệ sinh thái phản ứng.
Mặc dù Next.js đi kèm với mọi thứ bạn cần để bắt đầu, bạn có thể chọn giữa NPM và Yarn, JavaScript và TypeScript, CSS và SCSS, xuất tĩnh và triển khai không máy chủ.
Tính năng
- Định tuyến được thực hiện tự động - Bạn không cần phải định cấu hình bất kỳ thứ gì vì bất kỳ URL nào cũng được ánh xạ tới hệ thống tệp, tới các tệp trong thư mục trang (tất nhiên, bạn có các tùy chọn tùy chỉnh).
- Các thành phần của một tệp đơn - Thật đơn giản để thêm các kiểu trong phạm vi thành phần bằng cách sử dụng styled-jsx, được tích hợp hoàn toàn và được sản xuất bởi cùng một nhóm.
- Tải lại mã nóng - Khi Next.js phát hiện một sửa đổi được lưu vào đĩa, nó sẽ tải lại trang.
- Thành phần động - Bạn có thể tải động các mô-đun JavaScript và Thành phần React.
- Xuất tĩnh - Next.js cho phép bạn xuất một trang web hoàn toàn tĩnh từ ứng dụng của mình bằng lệnh xuất tiếp theo.
- Khả năng tương thích với Môi trường - Next.js tích hợp hoàn toàn với hệ sinh thái JavaScript, Node và React.
- Tự động tách mã - Chỉ các thư viện và JavaScript được yêu cầu mới được sử dụng để hiển thị các trang. Thay vì tạo một tệp JavaScript duy nhất chứa tất cả mã của ứng dụng, Next.js chia ứng dụng thành nhiều tài nguyên một cách thông minh.
Làm thế nào để tạo một ứng dụng next.js?
của DINTEK
Bạn có thể sử dụng lệnh node npx để cài đặt và xây dựng một dự án Next.js.
Thao tác này sẽ tạo một thư mục và tất cả các tệp, cấu hình và các mục khác cần thiết để chạy một dự án Next.js.
Bạn có thể khởi chạy ứng dụng khi nó đã được tạo.
Trang & định tuyến
Để xử lý các tuyến với Next.js, chúng ta không cần sử dụng khung định tuyến. Định tuyến với Next.js thật dễ dàng để thiết lập. Khi bạn sử dụng lệnh create-next-app để tạo ứng dụng Next.js mới, ứng dụng sẽ tạo một thư mục được gọi là 'trang' theo mặc định.
Thư mục 'trang' này là nơi bạn duy trì các tuyến đường của mình. Do đó, mỗi tệp thành phần phản ứng trong thư mục con sẽ được xử lý như một tuyến riêng biệt.
Ví dụ: nếu thư mục chứa các tệp đó:
- chỉ mục.js
- về.js
- acerles.js
Tệp này sẽ được chuyển đổi tự động theo ba cách:
- Trang chỉ mục localhost / index
- Trang giới thiệu localhost / about
- Trang blog localhost / các bài báo
Dưới đây là một ví dụ về trang about.js. Không có gì được cung cấp về trang, như bạn có thể thấy. Nó chỉ đơn giản là một thành phần chức năng React tiêu chuẩn.
tuyến đường
Để tạo các tuyến lồng nhau, trước tiên bạn phải thiết lập một thư mục con. Ví dụ: các trang / bài báo. Tạo thành phần phản ứng 'contact.js' của bạn trong thư mục đó và nó sẽ tạo ra trang localhost / posts / contact.
Nếu bạn đặt một tệp trong trang / article.js và tệp khác trong trang / bài viết / index.js. Cả hai đều phản ánh cùng một đường dẫn localhost / blog. Trong trường hợp này, Next.js sẽ chỉ hiển thị tệp tin article.js. Còn về các tuyến đường động, trong đó mỗi bài đăng trên blog có một đường dẫn riêng:
- localhost / blog / bài viết đầu tiên
- localhost / blog / -second-article
Sử dụng ký hiệu dấu ngoặc, bạn có thể xác định một tuyến động trong Next.js. Ví dụ: pages / article / [slug] .js
Các tuyến đường liên kết
Bây giờ bạn đã hoàn thành tuyến đường đầu tiên của mình. Tôi đoán bạn đang hỏi cách kết nối các trang với những tuyến đường đó. Bạn sẽ cần 'tiếp theo / liên kết' để làm như vậy.
Dưới đây là một ví dụ về trang chủ có liên kết đến trang Giới thiệu:
Nếu bạn muốn tạo kiểu liên kết, hãy sử dụng cú pháp sau:
Các tuyến đường chuyển hướng
Điều gì sẽ xảy ra nếu bạn cần chuyển hướng đến một trang nhất định? Ví dụ, khi một nút được nhấn? Bạn có thể thực hiện điều này bằng cách sử dụng 'router.push':
SEO
Các trang trong ứng dụng web yêu cầu phần tử meta (đầu) ngoài dữ liệu trong nội dung HTML. Điều này sẽ đòi hỏi phải cài đặt thêm một yêu cầu có tên là Mũ bảo hiểm React trong Ứng dụng React.
Chúng tôi có thể sử dụng thành phần Head từ next / head trong Next để dễ dàng thêm siêu dữ liệu vào các trang web của chúng tôi sẽ được hiển thị trong kết quả tìm kiếm và nhúng:
Các thành phần
Bạn sẽ thường xuyên cần phát triển các thành phần hoặc tệp bố cục. Ví dụ: một thành phần hiển thị thanh điều hướng. Cho đến nay chúng tôi mới sử dụng thư mục trang. Điều gì xảy ra nếu thành phần của bạn không phải là một trang tuyến đường?
Bạn không muốn người dùng điều hướng đến một trang như localhost / navbar. Nếu bạn đặt thành phần Navbar.js trong thư mục trang, đó là điều sẽ xảy ra. Bạn nên làm gì trong tình huống?
Chỉ cần lưu trữ tất cả các thành phần 'không phải trang' của bạn trong một thư mục riêng biệt. Hầu hết các dự án Next.js sử dụng biệt danh 'thành phần' và thư mục này được tạo trong thư mục gốc của dự án của bạn.
Thành phần đầu
Tải trang đầu tiên được hiển thị bởi Next.js ở phía máy chủ. Nó thực hiện điều này bằng cách sửa đổi HTML của trang của bạn. Phần tiêu đề được bao gồm.
Thành phần Next.js Head được sử dụng để cung cấp các thẻ phần đầu trang như tiêu đề và meta. Thành phần Head được sử dụng trong ví dụ này về thành phần Bố cục.
Tạo trang 404 không tìm thấy
Việc tạo trang lỗi 404 của riêng bạn là khả thi. Bạn có thể muốn tùy chỉnh thông báo hoặc thêm thiết kế trang của riêng mình. Trong thư mục trang, tạo tệp 404.js.
Khi lỗi 404 xảy ra, Next.js sẽ tự động chuyển hướng đến trang này. Đây là một ví dụ về trang 404 được cá nhân hóa:
Tìm nạp dữ liệu từ phía máy chủ
Thay vì tải xuống dữ liệu ở phía máy khách, Next.js cho phép bạn tiến hành một tập hợp dữ liệu ban đầu, ngụ ý gửi trang với dữ liệu đã được điền từ máy chủ.
Bạn có hai lựa chọn để triển khai tìm nạp dữ liệu phía máy chủ:
- Dữ liệu phải được tìm nạp theo từng yêu cầu.
- Chỉ nhận dữ liệu một lần trong suốt quá trình xây dựng (trang web tĩnh)
Tìm nạp dữ liệu theo từng yêu cầu
Phương thức getServerSideProps được sử dụng để phía máy chủ hiển thị từng yêu cầu. Chức năng này có thể được bao gồm ở cuối tệp thành phần của bạn. Next.js sẽ tự động điền các đạo cụ thành phần của bạn với đối tượng getServerSideProps nếu hàm đó có trong tệp thành phần của bạn.
Tìm nạp dữ liệu tại thời điểm xây dựng
Phương thức getStaticProps được sử dụng để hiển thị phía máy chủ tại thời điểm xây dựng. Chức năng này có thể được bao gồm ở cuối tệp thành phần của bạn. Phương thức này chạy mã máy chủ và gửi yêu cầu GET đến máy chủ, nhưng chỉ một lần khi dự án của chúng ta kết thúc.
Tại sao bạn nên học Next.js?
Một trong những lý do cho điều này là vì Next.js được xây dựng trên nền tảng của React, một bộ công cụ phát triển front-end dành cho tạo giao diện người dùng đó là lựa chọn yêu thích của tôi để thiết kế ứng dụng web.
Nhưng sẽ không đủ nếu Next.js không giỏi những gì nó đã làm… đúng không?
Vì vậy, những gì chính xác nó làm gì?
Đầu tiên chúng ta phải xác định một vài khái niệm để hiểu nó. Next.js trở nên phổ biến vì nó giải quyết được vấn đề mà nhiều nhà phát triển web gặp phải với các ứng dụng web phía máy khách (trong trình duyệt). Các Ứng dụng Trang đơn (SPA) này có trải nghiệm tốt hơn vì chúng không cần người dùng tải lại trang và cho phép nhiều tương tác hơn.
Tuy nhiên, vì phần lớn nội dung trong một ứng dụng như thế này chỉ hiển thị khi nó được thực hiện trong trình duyệt, trình thu thập thông tin web gặp khó khăn trong việc hiểu nội dung văn bản của một ứng dụng như vậy.
Do đó, mặc dù phổ biến, nhiều SPA vẫn ẩn danh đối với các công cụ tìm kiếm lớn như Google. Next.js hiện bao gồm một cơ chế tích hợp mạnh mẽ hơn để hiển thị phía máy chủ (SSR) của các thành phần React.
Next.js cho phép các nhà phát triển tạo mã JavaScript trên máy chủ trong quá trình xây dựng và cung cấp HTML cơ bản, có thể lập chỉ mục cho người dùng.
Ưu điểm
- Tuyệt vời cho trải nghiệm người dùng
- Tuyệt vời cho SEO
- Xây dựng một trang web tĩnh siêu nhanh hoạt động như một trang web động
- Linh hoạt trong việc xây dựng UI & UX.
- Nhiều lợi thế phát triển
- Hỗ trợ cộng đồng tuyệt vời
Nhược điểm
- Các trang web hoặc ứng dụng có một khoảng thời gian nhất định để xây dựng hoặc phát triển.
- Đối với một số tác vụ nhất định, Next.js là không đủ. Các nhà phát triển sẽ có thể xây dựng các tuyến đường động bằng cách sử dụng các công cụ Node.js.
Kết luận
Như bạn có thể thấy, Next.js đơn giản hóa việc phát triển ứng dụng React và cho phép bạn tập trung vào những gì quan trọng nhất - giao diện người dùng và logic ứng dụng của bạn. Nó bao gồm mọi thứ cần thiết để tạo các ứng dụng hiện đại, phong phú về giao diện người dùng và được cung cấp bởi API.
Nó cũng thích hợp cho các dự án chỉ có nội dung, chẳng hạn như blog và trang web kinh doanh, do khả năng tạo các trang HTML tĩnh.
Với các phiên bản hiện tại, Next.js không chỉ duy trì trải nghiệm nhà phát triển ở mức cao mà còn cung cấp các công cụ để tăng hiệu suất hình ảnh và trải nghiệm người dùng, đảm bảo một tương lai tươi sáng cho khung công tác này.
Bình luận