Tại sao phải học NextJS thay vì ReactJS trong năm 2023?
1. NextJS là gì?
Next.js là một framework dựa trên React để xây dựng ứng dụng web full-stack. Bạn đã sử dụng các component React để xây dựng giao diện người dùng thì Next.js có thêm các tính năng và tối ưu hóa bổ sung. NextJS tự động cấu hình các công cụ cần thiết cho React, như bundling, biên dịch và nhiều thứ khác. Điều này giúp bạn tập trung vào việc xây dựng ứng dụng của mình thay vì phải dành thời gian cho cấu hình.Nếu bạn là nhà phát triển webapp với ReactJS thì NexJS có thể giúp bạn xây dựng các ứng dụng một cách nhanh chóng.
2. Các chức năng chính của NextJS
Một số tính năng chính của Next.js bao gồm:
| Tính năng | Mô tả |
|---|---|
| Routing(định tuyến) | Tương tự như bạn sử dụng react-router-dom nhưng được tự động và tối ưu hoá dựa trên hệ thống tệp được xây dựng trên nền tảng Server Components hỗ trợ bố cục, định tuyến lồng nhau, trạng thái tải, xử lý lỗi, và nhiều tính năng khác. Bạn sẽ không cần cài đặt thủ công khi sử dụng NextJS. |
| Rendering(hiển thị trên trang web) | NextJS hỗ trợ render trang web cả 2 phía Client và Server, việc này sẽ tối ưu SEO đối với các trang cần SEO như trang sản phẩm của website ecomerge. Bạn sẽ linh hoạt lựa chọn các kiểu render trong từng trang web của bạn |
| Data fetching | Đơn giản hóa việc truy vấn dữ liệu với async/await trong Server Components, và một phiên bản cache dữ liệu và xác minh lại dữ liệu. |
| Styling | Tích hợp các phương pháp style cho website của bạn như CSS Modules, Tailwind CSS và CSS-in-JS |
3. Khởi tạo dự án đầu tay với Next.js
Để cài đặt và khởi tạo dự án với Next.js, mình khuyến khích bạn sử dụng công cụ create-next-app. Công cụ này sẽ xử lý mọi công đoạn khởi tạo một cách tự động.
$ npx create-next-app hello-app
Nếu bạn thích sử dụng Tailwind CSS thì thêm tham số như sau:
$ npx create-next-app -e with-tailwindcss hello-app
Lệnh trên chạy xong là bạn đã có đầy đủ các tệp, cấu hình cần thiết cho dự án có thể chạy được.
Để chạy dự án, bạn di chuyển con trỏ vào thư mục dự án vừa tạo:
$ cd hello-app
$ npm run dev
Sau đó bạn thử truy cập vào trình duyệt để kiểm tra kết quả nhé.
4. Yêu cầu kiến thức khi học series NextJS
Để học được NextJS một cách dễ dàng bạn cần có kiển thức về JS, HTML, và ReactJS.
5. Tóm tắt
- Bạn có thể hiểu chi tiết về Nextjs bạn có thể xem video dưới đây để hiểu rõ hơn về NextJS. Nếu yêu thích series NextJS này bạn hãy bình luận ở phía dưới để mình biết để có thêm động lực viết thêm nhiều bài viết chia sẻ kiến thức. Thank all!
All rights reserved
