🤖 Thực hành tốt nhất cho Pipelines React + Next.js

Gần đây, tôi đã đóng góp cho kho lưu trữ react.dev và nhận thấy cách mà pipeline CI/CD của họ được cấu trúc. Nó thật sạch sẽ, tự động hóa và đáng tin cậy. Điều này khiến tôi nghĩ rằng: những yếu tố thiết yếu nào mà mỗi dự án React/Next.js nên có trong pipeline của mình?

Hãy cùng khám phá thực hành tốt nhất 🚀.

🎯 Vấn đề với "Pipeline cơ bản"

Nhiều nhóm lập trình thiết lập các lệnh cơ bản như:

Cài đặt phụ thuộc
Xây dựng dự án
Triển khai

Nghe có vẻ ổn đúng không? Nhưng bạn đang bỏ lỡ nhiều điểm quan trọng:

Vấn đề liên quan đến kích thước gói
Các bản xây dựng bị hỏng
Môi trường không nhất quán
Phản hồi chậm

Danh sách này không dừng lại ở đây.

Điều quan trọng là: một pipeline dễ vỡ dẫn đến các bản phát hành dễ vỡ.

🧬 Các bước thiết yếu trong một Pipeline

Một pipeline React/Next.js vững chắc nên đi xa hơn việc chỉ cài đặt, lint, kiểm tra, và xây dựng.
Dưới đây là một workflow GitHub Actions mở rộng mà bạn có thể điều chỉnh cho dự án của mình:

yaml Copy

name: CI

on:
  push:
    branches: [ main ]
  pull_request:

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      # Kiểm tra kho lưu trữ
      - uses: actions/checkout@v3

      # Thiết lập Node.js
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      # Cài đặt phụ thuộc sạch
      - run: npm ci

      # Kiểm tra lint (thất bại nhanh)
      - run: npm run lint

      # Kiểm tra kiểu với TypeScript
      - run: npm run type-check

      # Kiểm tra đơn vị với độ phủ
      - run: npm run test -- --ci --coverage

      # Kiểm tra End-to-End (tùy chọn: Cypress/Playwright)
      - run: npm run e2e

      # Xây dựng ứng dụng Next.js
      - run: npm run build

      # Chạy phân tích tĩnh Next.js
      - run: npm run analyze

      # Kiểm tra kích thước gói (với ví dụ: size-limit)
      - run: npm run size

      # Kiểm tra thông điệp commit (Commits thông thường)
      - run: npx commitlint --from=HEAD~1 --to=HEAD

      # Tải lên các artifacts xây dựng (tùy chọn)
      - uses: actions/upload-artifact@v4
        with:
          name: next-build
          path: .next