Giới Thiệu

Bài viết này sẽ hướng dẫn các bạn cách triển khai trang web tĩnh được xây dựng bằng Next.js lên GitHub Pages. Lưu ý rằng hướng dẫn này áp dụng cho những ai không sử dụng API Routes của Next.js, vì vậy chúng ta sẽ chỉ tập trung vào việc phát hành các trang tĩnh.

1. Sự Khác Biệt Giữa Triển Khai Next.js và React

Khi triển khai một ứng dụng web, có sự khác biệt lớn giữa việc sử dụng Next.js và React truyền thống. Đặc biệt, việc sử dụng GitHub Actions và GitHub Pages cho phép chúng ta dễ dàng hosting các trang tĩnh.

Thực tế, Next.js đã có dịch vụ triển khai chính thức từ Vercel, nhưng vẫn có một số vấn đề như sau:

• Cold Start: Điều này làm cho thời gian truy cập vào trang web thỉnh thoảng gặp khó khăn, gây sự chậm trễ không mong muốn.
• Routing Domain: Vercel không hỗ trợ việc cấu hình domain cho nhiều ứng dụng hoặc dự án cùng một lúc.
• Cách Triển Khai: Next.js có những quy trình và cách thức triển khai khác với React, cụ thể là khi build, cả frontend và backend sẽ được tạo ra, gây khó khăn khi thả Docker image.

Để khắc phục các vấn đề này, một giải pháp là xuất các component và tệp tĩnh từ backend của Next.js ra một thư mục build cụ thể.

2. Các Bước Triển Khai Next.js Trên GitHub Pages

2.1. Hướng Dẫn Triển Khai cho Phiên Bản Next.js Mới Hơn 13.3.0

Đối với các phiên bản này, bạn có thể cấu hình next.config.js để xuất trực tiếp các tài nguyên tĩnh. Xem qua các bước sau:

1. Thêm cấu hình sau vào file next.config.js:

   javascript Copy

   /**
    * @type {import('next').NextConfig}
    */
   const nextConfig = {
     output: 'export',
   }
   
   module.exports = nextConfig

2. Chạy lệnh next build để tạo ra thư mục ./out/ chứa các tệp tĩnh.

3. Tạo file .github/workflows/nextjs.yml với nội dung như sau:

   yaml Copy

   name: Triển Khai Next.js Lên GitHub Pages
   
   on:
     push:
       branches: [main, master]
     workflow_dispatch:
   
   permissions:
     contents: read
     pages: write
     id-token: write
   
   concurrency:
     group: "pages"
     cancel-in-progress: false
   
   env:
     PROJECT_DIR: .  # Đặt thư mục gốc ở đây
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
           uses: actions/checkout@v4
   
         - name: Detect package manager
           id: detect-package-manager
           run: |
              ... # Các bước kiểm tra package manager và thiết lập môi trường
   
         - name: Build with Next.js
           run: ${{ steps.detect-package-manager.outputs.run-command }} next build
           working-directory: ${{ env.PROJECT_DIR }}
   
         - name: Upload artifact
           uses: actions/upload-pages-artifact@v3
           with:
             path: ${{ env.PROJECT_DIR }}/out
   
     deploy:
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       runs-on: ubuntu-latest
       needs: build
       steps:
         - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v4

4. Đưa mã lên GitHub và chờ workflow CI chạy hoàn tất.

2.2. Hướng Dẫn Triển Khai Cho Phiên Bản Next.js Cũ Hơn 13.3.0

Nếu bạn sử dụng phiên bản cũ, bạn có thể dùng lệnh next export ngay sau khi build. Các bước tương tự như trên, chỉ khác là bạn chỉ cần sử dụng lệnh next export để xuất tệp tĩnh.

Sau khi hoàn tất, hãy đảm bảo rằng bạn đã bật GitHub Pages trong cài đặt repo của mình để hoàn thành quá trình triển khai.

Hy vọng rằng những hướng dẫn này sẽ giúp ích cho bạn trong việc triển khai trang web tĩnh Next.js lên GitHub Pages một cách dễ dàng và hiệu quả. Chúc bạn thành công! 🎉
source: viblo