How To Deploy To Vercel With GitHub Actions

Vercel is a cloud platform or Platform-as-a-Service (PaaS) designed to help frontend developers create, preview, and deploy web applications swiftly and efficiently. In this tutorial, we’ll focus on deploying a Next.js application to Vercel using Git...

Jun 11, 2025 - 07:40

How To Deploy To Vercel With GitHub Actions

Vercel is a cloud platform or Platform-as-a-Service (PaaS) designed to help frontend developers create, preview, and deploy web applications swiftly and efficiently. In this tutorial, we’ll focus on deploying a Next.js application to Vercel using GitHub Actions.

In a previous article, we built a Next.js portfolio blog. Here, you’ll learn how to deploy it on Vercel with GitHub Actions.

Prerequisites

To be able to deploy your project, you should have a GitHub repository of the project (you can still follow along if you already have a Next.js project), and a Vercel account. Here is the GitHub repository that we’ll be working with. You can clone it to follow along.

How to Deploy Your Next App

Create Vercel Token and Add it to Your Secrets in GitHub

In your Vercel account, go to Settings, then go to Tokens.

Vercel account settings tokens.

In the Create Token section, enter a name for your token, select an expiration date and click “create”.

Creating a vercel token

You should see a success message with your token. Next, go to your GitHub repository, and click on the “Settings“ tab.

Vercel, token created success message.

In the Settings tab, go to Secrets and Variables on the sidebar, then click on Actions.

Actions secrets in GitHub repository settings.

You’ll see a section for adding secrets. Add a secret named VERCEL_TOKEN, and paste the token there.

vercel token, project id, org id.

The Vercel token is a token used to authenticate the GitHub runner. The Vercel CLI installed on the GitHub runner is going to execute the commands with your account. So, instead of it having to login, it uses the access token to verify that it was actually authorized by you to take the actions.

The Organization ID is used to tell Vercel which organization or team account the project should be created under.

The Project ID then tells Vercel the specific project you want to deploy. Just like the Organization ID, it is a unique identifier.

Install the Vercel CLI and Login

Use the command below to install vercel CLI globally on your computer:

npm install -g vercel

Then log into the CLI with the following command:

vercel login

Use one of the options to login.

I used GitHub. Select one with your arrow keys, and click enter.

vercel login

Create a Vercel Project from Your Local Directory

Navigate to your project directory if you’re not already in it. If you have already created a project on Vercel through the web interfce, use the vercel link command to link your current directory to the Vercel project. If you don’t already have a Vercel project, just type vercel in the CLI and follow the prompts to setup the project.

Create new Vercel project

With that, Vercel will create a .vercel folder in the project. Open it, and go to the project.json file.

Project.json

In the file, you should see your project ID and organization ID. Copy them and create secrets in your GitHub repository for each one.

vercel token, org ID, project ID.

Create your GitHub Workflow File

At the root of your project folder, create the .github/workflow folder. Then create a workflow file called vercel_deploy.yml.

f3c3a4ca-5d19-4866-a69d-9f4d3a760d8f

In the file, write this:

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
    paths:
      - '01-simple-blog/**'  

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: 01-simple-blog
    steps:
      - uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
        continue-on-error: true

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

This is the workflow file for my simple-writer-portfolio project.

First, we have the environment variables:

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
# Other code

Then we have the trigger. This triggers when I push to the main branch, affecting files in the 01-simple-blog subdirectory.

# Previous code
on:
  push:
    branches:
      - main
    paths:
      - '01-simple-blog/**'  
# Other code

Then we have the job definition. Here, I defined a job “Deploy-Production” that runs on Ubuntu. By default, all commands there will run in the 01-simple-blog directory, which is equivalent to running cd 01-simple-blog from the root before running commands on the shell. I did this because the Next.js project is in that directory, where the package.json is located.

# Previous code
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: 01-simple-blog
# Other code

Then the steps involved:

# Previous code
 steps:
      - uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
        continue-on-error: true

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

With these steps, Vercel is first installed on the GitHub runner. Then the vercel environment information is pulled. The project is built with vercel build, and the pre-built artifacts are then pushed to Vercel.

Push to GitHub and watch your code deploy

Stage your changes, if any:

git add .

Commit the changes:

git commit -m "Added GitHub Actions workflow"

And push:

git push origin

Now, go to your repository online, and check the deployment.

3fa5a9a8-c14b-4f55-9e04-c51310500c3f

Workflow run logs

Conclusion

With your basic GitHub workflow in place, you can now make changes to your code, push to GitHub, and have it deploy automatically. Though Vercel allows you to connect your repository directly, this method provides you with more flexibility and customizability. If you enjoyed this article, share it with others. You can also reach me on LinkedIn or X.