ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano

Appearance

Tạo và chạy dự án Next.js trong ServBay ​

Tổng quan ​

Next.js là một framework React mạnh mẽ, được phát triển và duy trì bởi Vercel, rất phổ biến trong việc xây dựng các ứng dụng web hiện đại có hiệu năng cao. Nó mang lại nhiều tính năng sẵn có, giúp đơn giản hóa quá trình phát triển các ứng dụng phức tạp cho lập trình viên.

Next.js là gì? ​

Next.js là một framework React mã nguồn mở phổ biến, hỗ trợ đa dạng phương thức render như server-side rendering (SSR) và static site generation (SSG). Những tính năng này giúp tăng hiệu suất, cải thiện trải nghiệm người dùng và tối ưu khả năng hiển thị trên công cụ tìm kiếm. Next.js tích hợp sẵn các chức năng như routing theo hệ thống file, API routes, chia nhỏ code, hỗ trợ CSS Modules,... mang đến trải nghiệm phát triển liền mạch.

Tính năng nổi bật và ưu điểm của Next.js ​

  • Hỗ trợ đa dạng chiến lược render: Đáp ứng server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR) cũng như kết hợp nhiều phương thức, giúp bạn linh hoạt lựa chọn mô hình phù hợp.
  • Routing theo hệ thống file: Tự động tạo route dựa trên cấu trúc thư mục pages hoặc app, rất trực quan và dễ hiểu.
  • API Routes: Dễ dàng thêm API endpoint ngay trong dự án Next.js, thuận tiện cho phát triển fullstack frontend-backend.
  • Chia nhỏ code tự động: Tách riêng code theo từng trang, chỉ tải JavaScript cần thiết, tối ưu tốc độ tải trang.
  • Tối ưu hóa hình ảnh (next/image): Tự động tối ưu kích thước, định dạng, chiến lược tải ảnh, cải thiện hiệu suất website.
  • Hỗ trợ CSS và Sass tích hợp: Quản lý, phát triển style dễ dàng.
  • Làm mới nhanh (Fast Refresh): Phản hồi tức thời khi cập nhật code trong quá trình phát triển.

Với Next.js, lập trình viên có thể xây dựng các ứng dụng web hiện đại, hiệu năng cao, dễ mở rộng và bảo trì.

Chạy dự án Next.js với ServBay ​

ServBay cung cấp môi trường phát triển web nội bộ tích hợp, bao gồm Node.js và nhiều công cụ lập trình khác. Nhờ môi trường Node.js cùng tính năng quản lý Website (hỗ trợ reverse proxy và phục vụ file tĩnh), bạn có thể dễ dàng tạo, phát triển và triển khai dự án Next.js.

Bài viết này sẽ hướng dẫn bạn tạo dự án, chạy ở chế độ phát triển (qua reverse proxy) và triển khai chế độ sản xuất (qua static file) với ServBay.

Điều kiện tiên quyết ​

Trước khi bắt đầu, hãy đảm bảo bạn đã chuẩn bị những điều sau:

  1. Đã cài đặt thành công ServBay trên hệ điều hành macOS.
  2. Đã cài đặt và kích hoạt Node.js thông qua giao diện quản lý Gói phần mềm của ServBay. Nếu chưa có Node.js, hãy xem hướng dẫn Sử dụng môi trường Node.js của ServBay.

Các bước thực hiện ​

1. Tạo dự án Next.js ​

Đầu tiên, hãy khởi tạo một dự án Next.js mới.

  1. Mở Terminal và chuyển thư mục về web root mặc định của ServBay:

    bash
    cd /Applications/ServBay/www

  2. Khởi tạo dự án bằng create-next-app: Thực thi lệnh sau để tạo một dự án Next.js mới. Nên sử dụng tên dự án là servbay-next-app, folder này sẽ được tạo trong /Applications/ServBay/www.

    bash
    npx create-next-app@latest servbay-next-app

    npx là tiện ích để chạy lệnh Node.js package, create-next-app@latest sử dụng phiên bản mới nhất của công cụ khởi tạo Next.js. Làm theo hướng dẫn hiển thị trong Terminal (chọn có dùng TypeScript, ESLint, Tailwind CSS, App Router v.v. hay không).

  3. Vào thư mục dự án và cài đặt các phụ thuộc:

    bash
    cd servbay-next-app
npm install

    Lệnh npm install sẽ dựa trên file package.json để cài đủ gói phụ thuộc cho dự án.

2. Sửa nội dung trang chủ dự án (Tùy chọn) ​

Để kiểm tra việc khởi tạo đã thành công, hãy chỉnh sửa thử nội dung trang chủ.

  1. Mở file pages/index.js (nếu dùng Pages Router), hoặc sửa file app/page.js nếu dùng App Router. Ví dụ dưới đây dùng Pages Router:

    bash
    # Mở file với trình soạn thảo bạn yêu thích, ví dụ VS Code
code pages/index.js

  2. Chỉnh sửa nội dung để trang web hiển thị "Hello ServBay!". Thay đổi file như sau:

    javascript
    // pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>Trang này chạy trên ServBay.</p>
    </div>
  );
}

    Nếu bạn dùng App Router (app/page.js), cấu trúc file có thể khác một chút, nhưng về cơ bản chỉ cần thay đổi nội dung của thẻ <h1>.

3. Khởi động chế độ phát triển ​

Trong quá trình phát triển, bạn nên sử dụng development server tích hợp của Next.js – hỗ trợ hot module reload và refresh nhanh. Tính năng reverse proxy của ServBay rất thích hợp để ánh xạ domain nội bộ đến cổng đang chạy Next.js dev server.

  1. Chạy development server: Trong thư mục dự án (/Applications/ServBay/www/servbay-next-app), chạy lệnh:

    bash
    npm run dev -- -p 8585

    Lệnh này khởi động Next.js dev server, cài đặt server lắng nghe ở cổng 8585 trên máy cục bộ. Có thể chọn cổng khác nếu thích.

  2. Cấu hình Website (Reverse Proxy) trên ServBay: Mở giao diện ServBay, vào mục Website. Thêm một website mới với cấu hình sau:

    • Tên: My first Next.js dev site (hoặc tên tùy ý)
    • Tên miền: servbay-next-dev.servbay.demo (nên dùng đuôi .servbay.demo để test nội bộ)
    • Loại website: chọn Reverse Proxy
    • Proxy IP: 127.0.0.1 (localhost)
    • Proxy Port: 8585 (cổng của dev server Next.js)

    Hoàn tất cấu hình, nhấn lưu và áp dụng thay đổi. ServBay sẽ tự động thiết lập Caddy hoặc Nginx (tùy cấu hình của bạn) để cho phép domain servbay-next-dev.servbay.demo trỏ về 127.0.0.1:8585.

    Tham khảo hướng dẫn chi tiết Thêm website Node.js chế độ phát triển trên ServBay.

  3. Truy cập website ở chế độ dev: Mở trình duyệt, truy cập domain https://servbay-next-dev.servbay.demo.

    ServBay sẽ tự động cung cấp chứng chỉ SSL cho các domain nội bộ (sd. ServBay User CA), nên bạn có thể truy cập website an toàn qua HTTPS mà không lo bị trình duyệt cảnh báo. Tham khảo thêm về Tùy biến domain và SSL miễn phí trên ServBay.

4. Build bản production và triển khai dạng static website ​

Sau khi phát triển xong, bạn cần build bản tối ưu để triển khai chính thức. Đối với các dự án Next.js có xuất ra tệp static (output: 'export' hoặc dùng lệnh next export), ServBay sẽ phục vụ tối ưu dạng static website.

  1. Build sản phẩm và export static files: Tại thư mục dự án (/Applications/ServBay/www/servbay-next-app), chạy:

    bash
    npm run build
npm run export
    • npm run build: biên dịch code Next.js, sinh bản dựng tối ưu (ra thư mục .next).
    • npm run export (hoặc khai báo output: 'export'): chuyển ứng dụng thành file HTML, CSS, JS tĩnh, lưu tại folder out.

  2. Cấu hình Website (Static) trên ServBay: Mở giao diện, vào Website, thêm mới với các thông số:

    • Tên: My first Next.js production site (hoặc tên tùy ý)
    • Domain: servbay-next-prod.servbay.demo (nên dùng đuôi .servbay.demo)
    • Loại Website: chọn Static
    • Website Root: điền đường dẫn tuyệt đối đến folder out vừa build: /Applications/ServBay/www/servbay-next-app/out.

    Lưu cấu hình, áp dụng thay đổi. ServBay sẽ cấu hình web server phục vụ file trực tiếp từ folder /Applications/ServBay/www/servbay-next-app/out.

  3. Xem website production: Mở trình duyệt, truy cập domain https://servbay-next-prod.servbay.demo để thấy nội dung static từ Next.js đã được build.

    Website production cũng hoàn toàn được bảo mật HTTPS qua domain và SSL tự động của ServBay.

Tổng kết ​

Sau các bước trên, bạn đã thành công tạo dự án Next.js trên môi trường phát triển nội bộ của ServBay, biết cách xem realtime qua reverse proxy ở chế độ dev và triển khai production bằng dịch vụ file tĩnh. Môi trường tích hợp của ServBay cùng chức năng quản lý Website giúp việc phát triển, kiểm thử và triển khai Next.js cực kỳ nhanh gọn, đơn giản.