🚀 Thực Tiễn Tốt Nhất cho Pipelines trong React + Next.js

Gần đây, tôi đã đóng góp vào 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ó rất sạch sẽ, tự động và có khả năng phục hồi. Điều này khiến tôi suy nghĩ: những yếu tố cần thiết 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 tiễn tốt nhất 🚀.

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

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

Cài đặt các 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 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ểm mấu chốt là: một pipeline dễ vỡ dẫn đến các bản phát hành dễ vỡ.

🧬 Các bước cần thiết trong một Pipeline

Một pipeline vững chắc cho React/Next.js nên vượt xa chỉ việc cài đặt, lint, test, và build. 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:
      # Checkout 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 sạch các phụ thuộc
      - run: npm ci

      # Kiểm tra lint (fail fast)
      - run: npm run lint

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

      # Kiểm tra đơn vị với coverage
      - 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 lint thông điệp commit (Conventional Commits)
      - 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