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

Next.js là gì?

Next.js là một framework React phát triển bởi Vercel, được sử dụng để xây dựng các ứng dụng React tĩnh và render phía server. Nó cung cấp nhiều tính năng có sẵn như render phía server (SSR), sinh trang tĩnh (SSG), định tuyến API, hỗ trợ CSS và Sass tích hợp, giúp các nhà phát triển xây dựng các ứng dụng Web hiện đại một cách hiệu quả hơn.

Các đặc tính và lợi ích chính của Next.js

• Render phía server (SSR): Cải thiện tốc độ tải trang và hiệu suất SEO.
• Sinh trang tĩnh (SSG): Render các trang tĩnh trước, nâng cao hiệu suất và trải nghiệm người dùng.
• Tự động chia nhỏ mã: Chỉ tải những mã JavaScript cần thiết cho trang hiện tại, tối ưu hóa hiệu suất.
• Định tuyến tích hợp: Định tuyến dựa trên hệ thống tệp, không cần cấu hình thêm.
• Định tuyến API: Có thể tạo các điểm kết API trong cùng một dự án.
• Hỗ trợ CSS và Sass tích hợp: Dễ dàng quản lý phong cách.

Sử dụng Next.js có thể giúp các nhà phát triển xây dựng các ứng dụng Web hiện đại, linh hoạt một cách hiệu quả hơn.

Tạo và chạy dự án Next.js bằng ServBay

Trong bài viết này, chúng ta sẽ sử dụng môi trường Node.js do ServBay cung cấp để tạo và chạy một dự án Next.js. Chúng ta sẽ sử dụng tính năng 'Host' của ServBay thiết lập máy chủ Web và truy cập dự án thông qua proxy ngược và dịch vụ tệp tĩnh.

Tạo dự án Next.js

1. Khởi tạo dự án

   Trước tiên, hãy đảm bảo bạn đã cài đặt môi trường Node.js mà ServBay cung cấp. Sau đó, sử dụng lệnh sau để khởi tạo một dự án Next.js mới:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Nhập tên dự án (khuyến nghị đặt tên là servbay-next-app), và chọn các tùy chọn khác nếu cần.

2. Cài đặt phụ thuộc

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

   cd servbay-next-app
   npm install

Sửa đổi nội dung đầu ra của dự án Next.js

1. Sửa file pages/index.js

   Mở file pages/index.js, thay đổi nội dung để trang web xuất ra "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Vào chế độ phát triển

1. Chạy server phát triển

   Khởi động server phát triển và chỉ định cổng (ví dụ: 8585):

   npm run dev -- -p 8585

   Điều này sẽ khởi động một server phát triển trên local và mở cổng 8585.

2. Cấu hình proxy ngược cho host của ServBay

   Sử dụng tính năng 'Host' của ServBay, truy cập server phát triển thông qua proxy ngược. Trong phần cấu hình 'Host' của ServBay, thêm một proxy ngược mới:

   • Tên: My first Next.js dev site
   • Tên miền: servbay-next-test.dev
   • Loại host: Proxy ngược
   • IP: 127.0.0.1
   • Cổng: 8585

   Các bước cấu hình chi tiết, xin tham khảo thêm trang web phát triển Nodejs.

3. Truy cập chế độ phát triển

   Mở trình duyệt, truy cập https://servbay-next-test.dev để xem dự án theo thời gian thực. Nhờ hỗ trợ tên miền tùy chỉnh và chứng chỉ SSL miễn phí của ServBay, bạn sẽ có mức độ bảo mật cao hơn.

Xây dựng phiên bản sản xuất

1. Xây dựng phiên bản sản xuất

   Khi hoàn thành phát triển, sử dụng lệnh sau để xây dựng phiên bản sản xuất:

   npm run build
   npm run export

   Sau khi hoàn thành, các tệp tĩnh sẽ được tạo ra trong thư mục out.

2. Thiết lập dịch vụ tệp tĩnh

   Sử dụng tính năng 'Host' của ServBay, truy cập phiên bản sản xuất thông qua dịch vụ tệp tĩnh. Trong phần cấu hình 'Host' của ServBay, thêm một website tĩnh mới:

   • Tên: My first Next.js production site
   • Tên miền: servbay-next-test.prod
   • Loại host: Tĩnh
   • Thư mục gốc trang web: /Applications/ServBay/www/servbay-next-app/out

3. Truy cập chế độ sản xuất

   Mở trình duyệt, truy cập https://servbay-next-test.prod để xem phiên bản sản xuất. Với tên miền tùy chỉnh và chứng chỉ SSL miễn phí của ServBay, website của bạn sẽ có mức bảo mật và độ tin cậy cao hơn.

Thông qua các bước trên, bạn đã thành công tạo và chạy một dự án Next.js và dùng các tính năng của ServBay để quản lý và truy cập dự án của mình.