Implementando CI/CD com GitHub Actions para projetos Next.js

Em um ambiente de desenvolvimento moderno, não basta escrever código de qualidade — é essencial automatizar tarefas como testes, builds e deploys para garantir agilidade, confiabilidade e consistência. É aí que entra o CI/CD (Integração Contínua e Entrega Contínua).

Neste artigo, vamos te mostrar como implementar um pipeline de CI/CD com GitHub Actions em projetos Next.js, automatizando testes e builds diretamente a partir do seu repositório no GitHub.

O que é CI/CD?

• CI (Continuous Integration): automatiza o processo de testes e validação a cada push ou pull request.
• CD (Continuous Delivery/Deployment): automatiza a entrega em produção, staging ou preview, após os testes serem aprovados.

Por que usar GitHub Actions?

O GitHub Actions permite criar workflows automatizados dentro do próprio GitHub, sem precisar de ferramentas externas. Ele é gratuito para repositórios públicos e altamente integrado ao ecossistema do GitHub.

📁 Estrutura básica de um projeto Next.js

my-app/
├── pages/
├── public/
├── styles/
├── .github/
│   └── workflows/
│       └── ci.yml
├── package.json
└── next.config.js

O arquivo do workflow vai dentro da pasta .github/workflows.

Criando o workflow de CI/CD

Vamos criar um arquivo chamado ci.yml:

name: CI/CD Next.js

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      - name: Clonando o repositório
        uses: actions/checkout@v3

      - name: Instalando Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Instalando dependências
        run: npm install

      - name: Rodando os testes
        run: npm run test

      - name: Build do projeto
        run: npm run build

Esse pipeline faz o seguinte:

1. Roda a cada push ou PR para a branch main.
2. Instala o Node.js.
3. Instala as dependências.
4. Roda os testes (com Jest, por exemplo).
5. Faz o build do Next.js (next build).

Deploy automático (exemplo com Vercel CLI)

Se você deseja fazer deploy automático (CD), pode usar a Vercel CLI com um token:

- name: Deploy na Vercel
  run: npx vercel --token=${{ secrets.VERCEL_TOKEN }} --prod

Segredos (Secrets)

Para isso, crie um token de acesso na Vercel e adicione aos Secrets do repositório no GitHub:

• Vá em Settings > Secrets and variables > Actions
• Adicione VERCEL_TOKEN

Boas práticas

• Sempre valide o código com npm run lint no workflow.
• Use ambientes separados para staging e produção.
• Configure workflows para preview em pull requests.
• Monitore falhas com notificações (Slack, Discord, etc).

Exemplo completo com lint, test, build e deploy:

name: CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - run: npm install
      - run: npm run lint
      - run: npm run test
      - run: npm run build

      - name: Deploy na Vercel
        run: npx vercel --token=${{ secrets.VERCEL_TOKEN }} --prod

Conclusão

Com GitHub Actions, você pode automatizar o ciclo de vida do seu projeto Next.js com poucos arquivos de configuração. CI/CD deixa seu time mais produtivo, reduz erros e torna o processo de deploy muito mais fluido.