Trong bài giới thiệu đầu tiên, các bạn đã có thể hiểu sức mạnh của NextJS trong lập trình website ở thời điểm năm 2023. Ở bài đầu tiên trong series lập trình NextJS, tôi sẽ hướng dẫn các bạn cách cài đặt môi trường để lập trình và cài đặt 1 chương trình NextJS đầu tiên.
Các bạn có thể xem bài viết về việc tại sao nên chọn lập trình NextJS ở thời điểm hiện tại tại đây
1. Cài đặt NodeJS
- Như các bạn đã biết, ReactJS cũng như NextJS đều chạy trên môi trường NodeJS. Vì thế nên máy tính của bạn cần cài đặt môi trường Node để có thể lập trình NextJS. Các bước để cài đặt NodeJS:
- Bước 1. Truy cập trang https://nodejs.org/en
- Bước 2. Tải phiên bản NodeJS phù hợp với máy window hay macOS
- Bước 3. Cài đặt
- Bước 4. Kiểm tra thành công
- Khi cài đặt xong NodeJS hãy chạy lệnh sau đây để kiểm tra xem bạn đã cài đặt thành công hay chưa:
node -v
Nếu kết quả hiện ra version của Node hiện tại của bạn trên máy thì việc cài đặt Node trên máy tính của bạn đã thành công.
2. Cài đặt IDE để lập trình
- Tôi đề xuất các bạn sử dụng VScode để lập trình NextJS. VScode có rất nhiều ưu điểm trong lập trình web vì nó hỗ trợ đa dạng các extention giúp bạn nhắc code và các tiện ích khác.
- Để cài đặt VScode các bạn làm theo các bước sau:
- Bước 1. Truy cập VS code https://code.visualstudio.com/
- Bước 2. Tải và cài đặt
- Danh sách các extention cần thiết khi lập trình NextjS:
- ESLint Extension: Cung cấp tích hợp ESLint trong VSCode, giúp bạn phát hiện lỗi và cải thiện chất lượng mã.
- Prettier Extension: Kết hợp Prettier với VSCode để tự động định dạng mã khi lưu tệp.
- Next.js Extension Pack (optional): Đây là một gói extension được tạo ra cho việc phát triển với Next.js. Nó bao gồm một số extension quan trọng như "Next.js Development", "Tailwind CSS IntelliSense" (nếu bạn sử dụng Tailwind CSS), và nhiều công cụ hữu ích khác.
- Debugger for Chrome (optional): Nếu bạn cần gỡ lỗi trong ứng dụng Next.js của mình, phần mở rộng này cho phép bạn sử dụng trình duyệt Chrome để gỡ lỗi mã JavaScript của mình.
- GraphQL Extension (nếu cần): Nếu ứng dụng của bạn sử dụng GraphQL, một extension hỗ trợ GraphQL như "GraphQL for VSCode" có thể hữu ích để việc phát triển và gỡ lỗi.
- Tailwind CSS IntelliSense (nếu sử dụng Tailwind CSS): Đây là một extension hỗ trợ cho Tailwind CSS giúp bạn có được gợi ý lớp CSS khi viết mã.
- Markdown All in One (nếu viết tài liệu dưới dạng Markdown): Nếu bạn viết tài liệu dưới dạng Markdown, extension này giúp bạn viết và định dạng nhanh chóng.
3. Cài đặt và chạy chương trình NextJS đầu tiên
Các bạn làm theo các bước sau
- Bước 1. Chạy lệnh
npx create-next-app@latest - Bước 2. Di chuyển tới thư mục vừa tạo
- Bước 3. Chạy trương trình đầu tiên với lệnh
npm run dev - Bước 4. Truy cập đến địa chỉ http://localhost:3000 để xem kết quả
4. Tóm tắt
Trên đây là các bước giúp bạn cài đặt môi trường lập trình và chạy 1 chương trình NextJS đầu tiên. Các bạn có thể xem tham khảo chi tiết qua video dưới đây: