Hướng dẫn cài Next.js trên hosting cPanel

Tác giả: 20/02/2025

Bước 1: Sau khi đăng ký hosting, thông tin hosting sẽ được gửi về email quản lý dịch vụ. Các bạn tiến hành login vào hosting theo thông tin Nhân Hòa đã gửi về email.

Bước 2: Truy cập vào mục ứng dụng Node.js

  • Tiến hành tạo Application

  • Node.js version: Bạn chọn phiên bản Node.js tuỳ vào nhu cầu của dự án hoặc bạn muốn sử dụng(Nếu được bạn nên lựa chọn phiên bản mới nhất). Ở đây mình chọn phiên bản 20.12.2.
  • Application mode: Là chế độ ứng dụng, với mục này sẽ có 2 phần là Development và Production. Chế độ này thiết lập biến môi trường NODE_ENV tương ứng để bạn có thể lựa chọn, tuỳ vào dự án và nhu cầu mà bạn sử dụng để triển khai. Ở đây mình sẽ chọn Production.
  • Application root: Mục này bạn điền thư mục mà bạn sẽ triển khai ứng dụng Next.js của bạn. Trong bài này thư mục mà mình sẽ triển khai ứng dụng là next.it.info.vn.
  • Application URL: Đây là URL mà qua đó ứng dụng của bạn sẽ có thể truy cập từ trình duyệt.
  • Application startup file: Là file khởi động chính của ứng dụng Node.js. Thông thường, đây là file mà Node.js sẽ chạy đầu tiên khi ứng dụng bắt đầu, như index.js, server.js, hoặc một file khác do bạn chỉ định.
  • Environment Variables: Là nơi bạn có thể thiết lập các biến môi trường cho ứng dụng của mình, chẳng hạn như các
  • API keys, database, hoặc các biến tùy chỉnh khác mà ứng dụng của bạn cần.
  • Quá trình chọn và điền thông tin để tạo ứng dụng hoàn tất, bạn bấm CREATE để tạo. Như vậy là bạn đã tạo thành công một ứng dụng node.js.

Sau khi điền đầy đủ các thông tin cần thiết bạn nhất Creat để tiến hành tạo 1 app Node.js

Bước 2: Triền khai ứng dụng Next.js:

  • Truy cập vào thư mục chứa dự án mà bạn đã điền ở mục Applicaiton root ở bước trước đó của bạn. Sau đó xóa hết các thư mục/file mặc định có trong ứng dụng Node.js đã tạo ra.

  • Vào môi trường Node.js để thực hiện các lệnh cài đặt Next.js:

  • Copy đường dẫn ứng dụng và truy cập vào ở mục Terminal ( Trong trường hợp hosting của bạn không có mục Terminal, bạn có thể liên hệ với kỹ thuật Nhân Hòa để được hỗ trợ enable tính năng này):

  • Chạy lệnh sau để cài Next.js:

npx create-next-app@latest .

Trong đó:

  • Would you like to use TypeScript?: Hỏi bạn có muốn sử dụng TypeScript không? Bạn chọn Yes nếu bạn muốn dùng TypeScript, và No nếu bạn chỉ muốn dùng JavaScript.
  • Would you like to use ESLint?: ESLint là một công cụ phân tích mã nguồn, giúp phát hiện và sửa các vấn đề trong JavaScript và TypeScript. Chọn Yes để sử dụng ESLint, và No nếu bạn không muốn dùng.
  • Would you like to use Tailwind CSS?: Hỏi bạn có muốn sử dụng Tailwind CSS không. Tailwind CSS là một framework CSS tiện lợi, giúp xây dựng giao diện nhanh chóng và linh hoạt. Chọn Yes để tích hợp Tailwind CSS vào dự án, hoặc No nếu bạn không muốn sử dụng.
  • Would you like to use src/ directory?: Hỏi bạn có muốn đặt mã nguồn của ứng dụng trong thư mục src/ không. Việc sử dụng thư mục src/ giúp tổ chức mã nguồn rõ ràng hơn. Chọn Yes để sử dụng, hoặc No nếu bạn muốn mã nguồn ở thư mục gốc của dự án.
  • Would you like to use App Router? (recommended): App Router là cách quản lý routing mới trong Next.js, cho phép tổ chức và quản lý routes một cách hiệu quả hơn. Đây là cách được khuyến nghị cho các dự án Next.js mới. Chọn Yes để sử dụng App Router, hoặc No nếu bạn muốn dùng hệ thống routing cũ.
  • Would you like to customize the default import alias (@/*)?: Hỏi bạn có muốn tùy chỉnh alias import mặc định không. Alias giúp bạn có thể sử dụng đường dẫn ngắn gọn khi import các module trong dự án. Chọn Yes nếu bạn muốn thiết lập alias tùy chỉnh, hoặc No nếu bạn muốn giữ alias mặc định @/*.

Quá trình cài đặt sau khi hoàn tất sẽ báo Success!.

Tiếp theo bạn sử dụng lệnh
npm run build

Bước 3: Cấu hình để có thể truy cập:

Ở bước này trong node.js của bạn đang cấu hình là file tên gì rồi bạn tạo file trong thư mục của dự án next.js của bạn đúng file đó bạn nhé. Vì Application startup file mình điền là app.js nên mình sẽ tạo file app.js.


Đây là nơi bạn sẽ cấu hình cách mà Passenger khởi động ứng dụng Next.js của bạn. Bạn thêm đoạn cấu hình sau vào file index.js hoặc app.js

  • Tạo file .htaccess

Bước 4: Khởi động lại ứng dụng và kiểm tra truy cập:

Như vậy là quá trình cài đặt đã hoàn tất, bạn truy cập Setup Node.js App rồi STOP APPSTART APP lại.

 

Chúc các bạn thành công !