Deploy Next.js on Vercel with GitHub Actions

Next.js • Vercel Platform • GitHub Actions

Configuration Files

name: Deploy to Vercel

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

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - 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 }}

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

# vercel.json (optional - for advanced configuration)
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Prerequisites

  • Vercel account (free tier available)
  • GitHub repository
  • Node.js 18+ installed
  • Next.js 14+ project
  • Vercel CLI installed globally

Deployment Steps

  • Create Next.js project: npx create-next-app@latest
  • Install Vercel CLI: npm i -g vercel
  • Link project: vercel link
  • Get Vercel tokens from project settings
  • Add GitHub Secrets: VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID
  • Create .github/workflows/deploy.yml
  • Push to main branch to deploy
  • Pull requests get automatic preview deployments
  • Monitor deployments in Vercel dashboard

📝 Additional Notes

  • ⚡ Zero-config deployments for Next.js
  • 🌍 Global Edge Network with 100+ locations
  • 🖼️ Automatic image optimization
  • 📊 Built-in Web Vitals analytics
  • 🔄 Automatic preview deployments for PRs
  • 💰 Free tier: 100GB bandwidth, unlimited deployments
  • 🚀 Edge Functions and Middleware support
  • 📦 Incremental Static Regeneration (ISR)
  • 🔒 Automatic HTTPS with custom domains
  • ⚠️ Serverless functions have 10s timeout on free tier