Hướng dẫn chạy NextJS trên Visual Studio Code

2:06 22/11/2023

Visual Studio Code do Microsoft phát triển là sự kết hợp hoàn hảo giữa IDE (môi trường phát triển tích hợp) và Code Editor (trình soạn thảo mã nguồn). Visual Studio Code miễn phí, nhanh, nhẹ và chạy tốt trên cả 3 nền tảng Windows, macOS và Linux. Hiện nay, Visual Studio Code là công cụ lập trình phổ biến nhất và cùng tìm hiểu chi tiết trong bài viết này nhé! 

Hướng dẫn chạy NextJS trên Visual Studio Code

Visual Studio Code sử dụng Electron, một nền tảng được sử dụng để triển khai các ứng dụng Node.js máy tính cá nhân, được phát triển dựa trên trình biên tập của Visual Studio Online. Với các đặc điểm như: 

  • Khả năng mở rộng và tùy chỉnh: đây là điều tuyệt vời nhất của Visual Studio Code. Thông qua kho extensions phong phú, Visual Studio Code hỗ trợ lập trình nhiều ngôn ngữ khác nhau, ngoài ra còn tùy chỉnh theme, kích thước, font chữ, keyboard shortcut, coding style, tính năng.
  • Intellisense: là sự kết hợp giữa trí tuệ nhân tạo và tự động hoàn thiện code. Intellisense cung cấp cách viết tắt, gợi ý và mô tả ngắn khi viết code. Những gợi ý sẽ được tính toán dựa trên nhiều nhân tố như: cú pháp, ngôn ngữ lập trình, hàm, biến.
  • Tích hợp Git: cung cấp đẩy (push) và kéo (pull) code trực tiếp từ Visual Studio Code.
  • Tích hợp Terminal: cung cấp giao diện cửa sổ dòng lệnh.
  • Debugger: hỗ trợ gỡ lỗi cho rất nhiều ngôn ngữ lập trình.
  • Code Spell Checker: cho phép kiểm tra tên hàm, ghi chú, tên biến sai chính tả.

Tìm hiểu về NextJS

Next.js là một framework front-end React được phát triển dưới dạng open-source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static. Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng Next.js sử dụng core của React và chỉ thêm các tính năng bổ sung.

Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý JavaScript cùng nhau để hiển thị trang. Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức được hiển thị. SSR cho phép các trang web load trong thời gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn.

Ngoài ra, sử dụng SSR cũng mang lại cho bạn lợi thế về SEO, giúp trang web hiển thị cao hơn trên các trang kết quả của công cụ tìm kiếm. SSR làm cho các trang web xếp hạng tốt hơn cho SEO vì chúng tải nhanh hơn và nhiều nội dung trang web có thể được quét bởi các SEO trackers.

Thẻ <head> trong Next.js cũng cho phép bạn chỉnh sửa thẻ <head> của một trang web, điều mà bạn không thể thực hiện trong React. Thẻ <head> là một phần cốt lõi trong metadata của trang web và góp phần vào xếp hạng SEO của trang web.

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO. Với tất cả thông tin trên server, nó sẽ xử lý để generate ra thông tin HTML của trang. Sau đó Client có thể gửi một yêu cầu đến Server và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với Client Render.

Cài đặt Visual Studio Code

Truy cập địa chỉ của để tải bản cài đặt. Chọn hệ điều hành Windows, macOS và Linux và phiên bản 32bit, 64bit:

Xong ta được:

Cài đặt NodeJS 

NextJS chạy trên môi trường NodeJS vì thế cần cài đặt môi trường NodeJS để có thể lập trình NextJS. Tải Node.js , có nhiều cách đóng gói: .msi, .zip hoặc với macOS là .pkg, chọn gói .msi (64-bit) cho Windows và tiến hành chạy file cài đặt, ta chọn Next để tiếp tục.

Đồng ý với các điều khoản người dùng cuối và chọn Next.

Mặc định Node.js sẽ được cài đặt ở ổ đĩa C, ta giữ tùy chọn này và chọn Next.

Các tùy chọn của chương trình, tương tự ta giữ tùy chọn này và chọn Next.

Xác nhận lần cuối trước khi cài đặt, ta chọn Install.

Và bắt đầu quá trình cài đặt.

Sau khi quá trình cài đặt hoàn tất, ta chọn Finish.

Cài đặt NextJS

Cài đặt và chạy chương trình NextJS đầu tiên

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ỉ //localhost:3000 để xem kết quả.

Hy vọng với những hướng dẫn cài đặt và lợi ích khi chạy NextJS trong Visual Studio Code được gợi ý ở trên, các bạn sinh viên sẽ tìm hiểu và nghiên cứu sâu về công cụ này, đồng thời ứng dụng vào các môn học ở trường. Chúc các bạn thành công!

Giảng viên Nguyễn Thị Hồng Hà
Bộ môn Ứng dụng phần mềm
Trường Cao đẳng FPT Mạng cá cược bóng đá cơ sở Hà Nội

Cùng chuyên mục

Đăng Kí học Fpoly 2023