Overview

While working through a Next.js tutorial, I previously deployed a project to Vercel by connecting my GitHub repository through the dashboard. It was simple and almost felt like magic—just pushing to GitHub triggered the deployment.

Later, in my previous portfolio project, I used Firebase Hosting with GitHub Actions and added custom workflow steps to run type checks and tests during deployment. That experience made me realize how valuable it is to have control over the CI process.

Although I’m currently only doing basic deployments with Vercel, I started wondering if I could achieve the same level of flexibility by integrating Vercel with GitHub Actions. Using GitHub Actions gives me more control over the deployment flow, especially if more complex CI steps are needed in the future. So I created a spike project to experiment with deploying to Vercel via its CLI and GitHub Actions.

What I Learned

• Basic usage and behavior of the Vercel CLI:
  • vercel build generates a .vercel/output directory
  • vercel deploy --prebuilt skips Vercel’s internal build and deploys the local output
• How to write GitHub Actions workflows for both production and preview environments
• The full process of linking Vercel with GitHub Actions:
  • Generating and using a Vercel Access Token
  • Adding secrets to GitHub for secure authentication
  • Running deploy commands via the CLI

Tech Stack