Migrate from Vercel

This guide walks you through migrating your site from Vercel to Quant. We’ll cover build configuration, environment variables, redirects, serverless functions, and DNS changes.

Migration overview

Vercel Feature	Quant Equivalent
Git integration	GitHub Actions
Build settings	GitHub Actions workflow
Environment variables	GitHub Secrets + workflow
Redirects (vercel.json)	Page Rules
Serverless Functions	Quant Cloud
Edge Functions	Edge Functions
Edge Middleware	Edge auth functions
Image Optimization	Quant image optimisation
Analytics	Third-party or edge functions

Step 1: Choose your deployment approach

Static sites

If your site is fully static (no API routes, no server-side rendering):

→ Use Quant Static with GitHub Actions

Server-rendered sites (Next.js, Nuxt, etc.)

If you use SSR, API routes, or serverless functions:

→ Use Quant Cloud for full server support

Step 2: Create a Quant project

1. Sign up at dashboard.quantcdn.io
2. Create a Static project (or skip for Quant Cloud)
3. Note your organisation ID and project name
4. Copy your project token from Integrations

Step 3: Set up GitHub Actions

For static sites

Create .github/workflows/deploy.yml:

name: Deploy to Quant

on:
  push:
    branches: [main]

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

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          NODE_ENV: production

      - name: Deploy to Quant
        uses: quantcdn/deploy-action@v6
        with:
          customer: ${{ secrets.QUANT_CUSTOMER }}
          project: ${{ secrets.QUANT_PROJECT }}
          token: ${{ secrets.QUANT_TOKEN }}
          dir: out  # Next.js static export, adjust for your framework
          skip-purge: true

      - name: Purge cache
        uses: quantcdn/purge-action@v6
        with:
          customer: ${{ secrets.QUANT_CUSTOMER }}
          project: ${{ secrets.QUANT_PROJECT }}
          token: ${{ secrets.QUANT_TOKEN }}
          url_pattern: "/*"

For server-rendered sites

See the Next.js guide for Quant Cloud deployment with SSR support.

Step 4: Migrate environment variables

Build-time variables

Vercel environment variables become GitHub Secrets:

1. Go to your GitHub repository Settings → Secrets and variables → Actions
2. Add each environment variable as a secret
3. Reference them in your workflow:

- name: Build
  run: npm run build
  env:
    NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
    DATABASE_URL: ${{ secrets.DATABASE_URL }}

Environment-specific variables

For different values per environment (preview, production):

- name: Set environment
  run: |
    if [[ $GITHUB_REF == 'refs/heads/main' ]]; then
      echo "API_URL=https://api.example.com" >> $GITHUB_ENV
    else
      echo "API_URL=https://staging-api.example.com" >> $GITHUB_ENV
    fi

- name: Build
  run: npm run build
  env:
    NEXT_PUBLIC_API_URL: ${{ env.API_URL }}

Runtime variables (Quant Cloud)

For server-side runtime variables, configure in the Quant Cloud dashboard or use the environment variables action.

Step 5: Migrate redirects and rewrites

Convert vercel.json redirects

vercel.json:

{
  "redirects": [
    { "source": "/old", "destination": "/new", "permanent": true },
    { "source": "/blog/:slug", "destination": "/posts/:slug", "permanent": false }
  ],
  "rewrites": [
    { "source": "/api/:path*", "destination": "https://api.example.com/:path*" }
  ]
}

Quant Page Rules:

URL Match	Action	Target	Status
/old	Redirect	/new	301
/blog/*	Redirect	/posts/$1	302
/api/*	Proxy	https://api.example.com/$1	—

Syntax differences

Vercel	Quant
:param	* with $1 capture
:path*	* with $1 or $*
permanent: true	Status 301
permanent: false	Status 302

Headers

vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Quant: Use Custom HTTP Headers in the dashboard for global headers, or Page Rules for path-specific headers.

Step 6: Migrate serverless functions

Edge Functions

Vercel Edge Functions can migrate to Quant Edge Functions:

Vercel Edge Function:

export const config = { runtime: 'edge' };

export default async function handler(request) {
  return new Response('Hello from the edge');
}

Quant Edge Function:

export default {
  async fetch(event) {
    return new Response('Hello from the edge');
  }
};

Deploy with: quant function ./my-function.js "Description"

Serverless Functions (Node.js)

Vercel serverless functions (API routes) require a server runtime. Options:

1. Quant Cloud — Deploy your full application with output: 'standalone'
2. External API — Move API routes to a separate service
3. Edge Functions — Convert simple functions to edge runtime

Edge Middleware

Vercel Middleware can be replaced with Quant Auth Middleware:

Vercel Middleware:

middleware.js

export function middleware(request) {
  if (!request.cookies.get('token')) {
    return Response.redirect('/login');
  }
}

Quant Auth Middleware:

export default {
  async fetch(event) {
    const token = event.request.headers.get('Cookie')?.match(/token=([^;]+)/)?.[1];
    if (!token) {
      return Response.redirect('/login');
    }
    return event.next();
  }
};

Step 7: Configure framework settings

Next.js

For static export, update next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',  // For static sites
  // OR
  output: 'standalone',  // For Quant Cloud
  images: {
    unoptimized: true,  // Use Quant's image optimisation instead
  },
};

module.exports = nextConfig;

Other frameworks

Most frameworks work without changes. Adjust the build output directory in your workflow:

Framework	Output Directory
Next.js (static)	out
Nuxt (static)	.output/public
Astro	dist
SvelteKit (static)	build
Gatsby	public

Step 8: Image optimisation

Vercel’s Image Optimization can be replaced with Quant’s built-in image optimisation:

1. Go to your project settings in the dashboard
2. Enable Image Optimization
3. Images are automatically converted to WebP/AVIF and resized

For Next.js, you can disable the built-in optimisation:

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
};

Step 9: Update DNS

Test first

1. Verify your site works on the Quant preview domain
2. Check all pages, API routes, and functions
3. Ensure SSL certificate is provisioned

DNS changes

In Domains, add your custom domain and follow the DNS instructions:

For apex domains:

• Add A records pointing to Quant IPs

For subdomains:

• Add CNAME pointing to [project].quantcdn.io

Using Quant DNS

For best results, migrate your DNS to Quant DNS:

1. Create a DNS zone
2. Import existing records
3. Update nameservers at your registrar

Step 10: Verify and clean up

After DNS propagation:

1. Test all functionality — Pages, forms, API routes, redirects
2. Check SSL — Ensure HTTPS works correctly
3. Monitor for errors — Watch for 404s or failed requests
4. Remove Vercel — Delete your Vercel project once confirmed

Feature comparison

Feature	Vercel	Quant
Global CDN	✅	✅ 600+ locations
Automatic HTTPS	✅	✅
Preview deployments	✅	Preview domains
Edge Functions	✅	✅
Serverless Functions	✅	Quant Cloud
Image Optimization	✅	✅
ISR	✅	Quant Cloud
Middleware	✅	Auth middleware
Analytics	✅	Third-party
WAF	Enterprise	✅ Included
Australian data residency	❌	✅

Troubleshooting

Static export fails

For Next.js, ensure all dynamic routes have generateStaticParams:

export async function generateStaticParams() {
  return [{ slug: 'post-1' }, { slug: 'post-2' }];
}

API routes not working

Static deployments don’t support API routes. Either:

• Migrate to Quant Cloud for full server support
• Move API logic to external services
• Convert to edge functions where possible

Images not loading

If using Next.js Image component without a server:

1. Enable unoptimized: true in next.config.js
2. Enable Quant image optimisation in the dashboard

Environment variables undefined

Ensure variables are:

• Added as GitHub Secrets
• Referenced correctly in the workflow
• Prefixed appropriately (e.g., NEXT_PUBLIC_ for client-side)

Next steps

• Configure WAF — Enable security features
• Set up Quant Cloud — For SSR applications
• Optimise performance — Configure caching