Cài đặt Nextjs trên Ubuntu, WSL2

1. Cài đặt Node.js trên WSL2, Ubuntu

Để tạo được dự án Nextjs trên WSL2 hoặc Ubuntu, bạn phải cài đặt nvm, node.js và npm.

1.1 Cài đặt NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Để xác minh cài đặt, hãy nhập:

command -v nvm

… điều này sẽ trả về nvm, nếu bạn nhận được ‘lệnh không tìm thấy’ hoặc không có phản hồi nào, hãy đóng thiết bị đầu cuối hiện tại của bạn, mở lại và thử lại.

Liệt kê các phiên bản Node hiện đang được cài đặt (nếu bạn có các phiên bản khác):

nvm ls

image

1.2 Cài đặt Node.js

Cài đặt cả phiên bản LTS hiện tại và ổn định của Node.js. Trong bước sau, bạn sẽ học cách chuyển đổi giữa các phiên bản Node.js đang hoạt động bằng một lệnh nvm.

  • Cài đặt bản phát hành LTS ổn định hiện tại của Node.js (được khuyến nghị cho các ứng dụng sản xuất):
    nvm install --lts
    
  • Cài đặt bản phát hành hiện tại của Node.js (để thử nghiệm các tính năng và cải tiến mới nhất của Node.js, nhưng có nhiều khả năng gặp sự cố hơn):
    nvm install node
    
  • Xác minh rằng Node.js đã được cài đặt và là phiên bản mặc định hiện tại với :
    node --version
    
    Sau đó, xác minh rằng bạn cũng có npm, với:
    npm --version
    

(Bạn cũng có thể sử dụng which node hoặc which npm để xem đường dẫn được sử dụng cho các phiên bản mặc định).

Để thay đổi phiên bản Node.js bạn muốn sử dụng cho một dự án, hãy tạo một thư mục dự án mới mkdir NodeTest và nhập thư mục cd NodeTest , sau đó enter nvm use node để chuyển sang phiên bản Hiện tại hoặc nvm use --lts để chuyển sang phiên bản LTS.

Bạn cũng có thể sử dụng số cụ thể cho bất kỳ phiên bản bổ sung nào bạn đã cài đặt, chẳng hạn như nvm use v8.2.1 .

(Để liệt kê tất cả các phiên bản Node.js có sẵn, hãy sử dụng lệnh: nvm ls-remote).

Nếu bạn đang sử dụng NVM để cài đặt Node.js và NPM, bạn không cần phải sử dụng lệnh SUDO để cài đặt các gói mới.

2. Cài đặt Next.js

Để cài đặt Next.js, bao gồm cài đặt tiếp theo, phản ứng và phản ứng-dom:

  1. Mở dòng lệnh Terminal (WSL2 hoặc Ubuntu).

  2. Tạo một thư mục dự án mới:

    mkdir NextProjects
    cd NextProjects
    
  3. Cài đặt Next.js và tạo một dự án (thay thế ‘my-next-app’ bằng bất cứ thứ gì bạn muốn gọi là ứng dụng của mình)

    npx create-next-app my-next-app
    
  4. Khi gói đã được cài đặt, hãy thay đổi các thư mục thành thư mục ứng dụng mới của bạn cd my-next-app, sau đó sử dụng code .để mở dự án Next.js của bạn trong VS Code. Điều này sẽ cho phép bạn xem khung Next.js đã được tạo cho ứng dụng của bạn. Lưu ý rằng VS Code đã mở ứng dụng của bạn trong môi trường WSL-Remote (như được chỉ ra trong tab màu xanh lục ở phía dưới bên trái của cửa sổ VS Code của bạn). Điều này có nghĩa là trong khi bạn đang sử dụng VS Code để chỉnh sửa trên HĐH Windows, nó vẫn đang chạy ứng dụng của bạn trên HĐH Linux…
    WSL-Mở rộng từ xa

  5. Có 3 lệnh bạn cần biết khi Next.js được cài đặt:

    • npm run dev để chạy phiên bản phát triển với tính năng tải lại nóng, xem tệp và chạy lại tác vụ.
    • npm run build để biên dịch dự án của bạn.
    • npm start để khởi động ứng dụng của bạn ở chế độ sản xuất.

    Mở thiết bị đầu cuối WSL được tích hợp trong Mã VS ( Xem> Thiết bị đầu cuối ). Đảm bảo rằng đường dẫn đầu cuối được trỏ đến thư mục dự án của bạn (tức là. ~/NextProjects/my-next-app$). Sau đó, hãy thử chạy phiên bản phát triển của ứng dụng Next.js mới của bạn bằng cách sử dụng: npm run dev

  6. Máy chủ phát triển cục bộ sẽ khởi động và khi các trang dự án của bạn được xây dựng xong, thiết bị đầu cuối của bạn sẽ hiển thị “đã biên dịch thành công - sẵn sàng bật http://localhost:3000”. Chọn liên kết localhost này để mở ứng dụng Next.js mới của bạn trong trình duyệt web.

    Ứng dụng Next.js của bạn đang chạy trong localhost: 3000