Nafiz Iqbal
All posts

devops2 min read

Beginner guide for CI CD pipeline in Next js

We all know the term CI/CD sounds like a nightmare for junior developers. Let’s make it easier.

In this post, I’m not gonna teach you the complex terms, unlike the YouTube tutorials, and I won't say “Learn CI/CD in 1 hour.”

Let’s cut the noise. We all know what it is and why we need it. I’m gonna stick to How.

Prerequisite: You own a personal VPS (like DigitalOcean or EC2) and you have a Next.js app running on it manually.

Let’s assume you are tired of dragging files. Here is how we automate it:

1. Configure the repo: Go to the GitHub repo, and select the action tab, find Node.js in Continuous integration. Then just commit the file, we’ll set this up later. 

2. The Handshake (SSH Keys) 🔑 GitHub needs permission to enter your server without a password.

  • Generate an SSH key pair locally.

  • Add the Public Key to your VPS (~/.ssh/authorized_keys).

  • Copy the Private Key.

3. The Vault (GitHub Secrets) 🔒 Never put passwords in your code. Go to Repo Settings > Secrets and add:

  • SSH_PRIVATE_KEY (The key you just copied)

  • HOST (Your VPS IP address)

  • USERNAME (Usually 'root' or 'ubuntu')

4. The Worker (The YAML File) 🤖 Create .github/workflows/deploy.yml and paste this. This is the exact logic that logs in and updates your site:

YAML

name: Deploy to VPS

on:

  push:

    branches: [ main ]


jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Deploy via SSH

        uses: appleboy/ssh-action@v1.0.3

        with:

          host: ${{ secrets.HOST }}

          username: ${{ secrets.USERNAME }}

          key: ${{ secrets.SSH_PRIVATE_KEY }}

          script: |

            # Go to your project folder

            cd /var/www/my-next-app

            # Get the new code

            git pull origin main

            # Install new packages & rebuild

            npm install

            npm run build

            # Restart the live server

            pm2 restart next-app


5. The Result? You push code from the IDE, and you go grab a coffee. ☕

By the time you sit back down, GitHub has logged in, pulled the changes, rebuilt the site, and restarted the server using PM2.

No dragging files. No manual SSH. No "oops, I broke production."

It’s not magic, it’s just a script. And you can set it up this weekend.


  • nextjs
  • devops
  • webdevelopment
  • coding
  • juniordeveloper
  • selfhosted

Originally published on BlogSpace, where the whole archive lives.

View on BlogSpace

Keep reading

Or browse the full archive on BlogSpace →