GitHub action to deploy automatically NextJS to Vercel with Slack failure callback

deploy.yml

name: NextJS CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  validate:
    name: 🧪 Validate & Test
    runs-on: ubuntu-latest

    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@v4

      - name: 🔧 Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"

      - name: 📦 Install dependencies
        run: yarn install --frozen-lockfile

      - name: 🧪 Run tests
        id: run-tests
        run: yarn test

      - name: 📣 Notify Slack on Failure
        if: failure()
        uses: slackapi/[email protected]
        with:
          webhook: ${{ secrets.SLACK_WEBHOOK }}
          webhook-type: incoming-webhook
          payload: |
            {
              "text": "❌ CI build failed for ${{ github.repository }}",
              "blocks": [
                {
                  "type": "header",
                  "text": {
                    "type": "plain_text",
                    "text": "❌ CI Build Failed",
                    "emoji": true
                  }
                },
                {
                  "type": "section",
                  "fields": [
                    {
                      "type": "mrkdwn",
                      "text": "*Repository:*\n${{ github.repository }}"
                    },
                    {
                      "type": "mrkdwn",
                      "text": "*Branch:*\n${{ github.ref_name }}"
                    }
                  ]
                },
                {
                  "type": "section",
                  "fields": [
                    {
                      "type": "mrkdwn",
                      "text": "*Commit:*\n${{ github.event.head_commit.message || github.event.pull_request.title }}"
                    },
                    {
                      "type": "mrkdwn",
                      "text": "*Author:*\n${{ github.actor }}"
                    }
                  ]
                },
                {
                  "type": "actions",
                  "elements": [
                    {
                      "type": "button",
                      "text": {
                        "type": "plain_text",
                        "text": "View Workflow",
                        "emoji": true
                      },
                      "url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
                    }
                  ]
                }
              ]
            }
  deploy:
    name: 🚀 Deploy to Vercel
    needs: validate
    runs-on: ubuntu-latest
    steps:
      - name: 📥 Checkout code
        uses: actions/checkout@v4

      - name: Trigger webhooks
        if: success()
        run: |
          webhook=$(echo "${{ secrets.VERCEL_WEBHOOK }}")
          curl -X POST -H "Content-Type: application/json" -d '{"message": "Build réussi"}' $webhook

instruction.md

Instruction

1. Create a Vercel Wehbook on Settings > Git
2. Add this webhook on repo actions secrets as VERCEL_WEBHOOK
3. Get your Slack webhook (like Incoming Webhook apps) and add it has SLACK_WEBHOOK

Enable the action

In your repository root, add a file like .github/workflows/deploy.yml and commit it to enable actions