Vercel Deployment: Complete Guide for Frontend Projects

In this tutorial, you'll learn about Vercel Deployment: Complete Guide for Frontend Projects. We cover key concepts, practical examples, and best practices.

Vercel is a deployment platform optimized for frontend frameworks like Next.js, React, Vue, and Svelte. It provides automatic SSL, global CDN, serverless functions, and instant rollbacks with every Git push.

In this tutorial, you will learn to connect a Git repository to Vercel, configure framework presets, set up environment variables per environment, write serverless functions, add custom domains, manage preview deployments, and use the Vercel CLI for local development. DodaTech uses Vercel to deploy DodaZIP marketing pages and Doda Browser feature previews.

What You'll Learn

By the end of this guide, you will deploy a frontend application from GitHub to Vercel with automatic builds, configure serverless API functions, set up custom domains with automatic HTTPS, and manage team deployments with environment-specific variables.

Why Vercel Matters

Vercel pioneered the frontend cloud model where deployment is as simple as a Git push. Its intelligent framework detection automatically configures build settings for 30+ frameworks. Serverless Functions at the edge scale globally with zero cold starts for many use cases. For teams shipping frontend applications rapidly, Vercel removes all ops overhead. It integrates naturally with DevOps pipelines and complements traditional Web Servers infrastructure.

Vercel Deployment Learning Path

flowchart LR
  A[Git Repository] --> B[Import Project]
  B --> C[Framework Presets]
  C --> D[Environment Variables]
  D --> E[Serverless Functions]
  E --> F{You Are Here}
  style F fill:#f90,color:#fff

Importing a Project from Git

Push your frontend project to GitHub, GitLab, or Bitbucket, then import via the Vercel dashboard:

# Example: Next.js project creation and push
npx create-next-app@latest dodatech-dashboard
cd dodatech-dashboard
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-org/dodatech-dashboard.git
git branch -M main
git push -u origin main

Vercel project configuration (vercel.json)

{
  "name": "dodatech-dashboard",
  "framework": "nextjs",
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "regions": ["iad1", "hkg1"],
  "functions": {
    "api/**/*.js": {
      "memory": 256,
      "maxDuration": 10
    }
  }
}

Expected output

🔍  Inspecting project with Vercel CLI
✔  Linked to vercel.com/your-org/dodatech-dashboard
🔀  Automated deployment detected branch main
📦  Running "npm install"
🏗️  Running "next build"
✔  Build completed
🌐  Deployed to production: https://dodatech-dashboard.vercel.app

Environment Variables

Configure variables per environment (Production, Preview, Development):

# Using Vercel Dashboard > Project > Environment Variables

# Production
DATABASE_URL=https://prod-db.dodatech.com
SENTRY_DSN=https://abc@sentry.io/123
NEXT_PUBLIC_API_URL=https://api.dodatech.com
AUTH_SECRET=@auth-secret  # Encrypted reference

# Preview (staging)
NEXT_PUBLIC_API_URL=https://staging-api.dodatech.com

# Development (local)
NEXT_PUBLIC_API_URL=http://localhost:3000

Access in your Next.js app:

// pages/api/products.js
export default async function handler(req, res) {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  const response = await fetch(`${apiUrl}/products`);
  const products = await response.json();

  res.status(200).json(products);
}

Using Vercel CLI for environment variables

# Install Vercel CLI
npm install -g vercel

# Pull environment variables locally
vercel env pull .env.local

# List environment variables
vercel env ls

# Add a new variable
vercel env add DATABASE_URL production

Serverless Functions

Vercel supports serverless functions in the api/ directory or via framework-specific methods:

// api/products.js (REST endpoint)
export default async function handler(req, res) {
  const { method } = req;

  const products = {
    1: { name: "Doda Browser", version: "5.2", platform: "Windows, macOS, Linux" },
    2: { name: "DodaZIP", version: "3.1", platform: "Windows, macOS" },
    3: { name: "Durga Antivirus Pro", version: "2026", platform: "Windows, macOS, Android" }
  };

  switch (method) {
    case "GET":
      const id = req.query.id;
      if (id) {
        const product = products[id];
        if (!product) return res.status(404).json({ error: "Not found" });
        return res.status(200).json(product);
      }
      return res.status(200).json(Object.values(products));
    case "POST":
      return res.status(201).json({ message: "Product created" });
    default:
      res.setHeader("Allow", ["GET", "POST"]);
      return res.status(405).end(`Method ${method} Not Allowed`);
  }
}

For Edge Functions (faster, runs globally):

// api/hello-edge.js
export const config = {
  runtime: "edge",
};

export default async function handler(request) {
  const url = new URL(request.url);
  const name = url.searchParams.get("name") || "World";

  return new Response(`Hello ${name} from the Edge!`, {
    headers: { "content-type": "text/plain" },
  });
}

Testing locally

# Dev server with API routes
npm run dev
# Visit http://localhost:3000/api/products
# Visit http://localhost:3000/api/products?id=1

# Test Edge Function locally
curl http://localhost:3000/api/hello-edge?name=DodaTech

Expected output

curl https://dodatech-dashboard.vercel.app/api/products
# [{"name":"Doda Browser","version":"5.2","platform":"Windows, macOS, Linux"},...]

curl https://dodatech-dashboard.vercel.app/api/hello-edge?name=DodaTech
# Hello DodaTech from the Edge!

Preview Deployments and Git Integration

Every pull request generates a preview URL automatically:

# Create a feature branch
git checkout -b feature/analytics-dashboard

# Make changes
echo "export default function Analytics() { return <div>Analytics</div> }" > pages/analytics.js
git add .
git commit -m "Add analytics dashboard page"
git push -u origin feature/analytics-dashboard

Branch deployment rules

Configure in vercel.json:

{
  "github": {
    "silent": true,
    "autoJobCancelation": true,
    "deployOnProductionBranch": true
  }
}

Custom Domains

Add a custom domain in the Vercel Dashboard:

# In Vercel Dashboard > Project > Domains
# Add: dashboard.dodatech.com
#
# DNS configuration:
# Type: CNAME
# Name: dashboard
# Value: cname.vercel-dns.com
#
# Or use Vercel's nameservers for automatic configuration

Expected behavior

curl -I https://dashboard.dodatech.com
# HTTP/2 200
# x-vercel-id: iad1::xyz-12345
# x-vercel-cache: MISS

Monorepo Support

Deploy multiple projects from a single repository:

{
  "name": "dodatech-monorepo",
  "framework": "nextjs",
  "buildCommand": "cd apps/dashboard && next build",
  "outputDirectory": "apps/dashboard/.next",
  "installCommand": "npm install"
}

For multiple apps in one repo:

// apps/dashboard/vercel.json
{
  "name": "dodatech-dashboard",
  "framework": "nextjs",
  "rootDirectory": "apps/dashboard"
}

Common Errors

1. Build Fails with Module Not Found

A dependency is missing from package.json or the installation failed. Check the build logs and run npm install locally to verify dependencies resolve correctly.

2. Serverless Function Timeout

Free plan functions timeout after 10 seconds (60 seconds on Pro). Optimize database queries, add caching, or increase the maxDuration in vercel.json.

3. Environment Variable Not Available in Build

Only variables prefixed with NEXT_PUBLIC_ are available at build time. Runtime variables are encrypted and only available in Serverless Functions.

4. Domain DNS Not Propagating

Vercel DNS changes can take up to 48 hours. Verify the CNAME record exists and points to cname.vercel-dns.com. Use dig dashboard.dodatech.com CNAME to check.

5. Preview Deployment Shows Production Data

Preview deployments use production environment variables. Create a separate Preview environment variable with staging values in the Vercel Dashboard.

Practice Questions

1. What is the difference between Serverless Functions and Edge Functions in Vercel? Serverless Functions run in specific regions with Node.js, Python, or Go runtimes. Edge Functions run globally on V8 isolates with lower cold starts but only support JavaScript.

2. How do you set a custom domain on a Vercel deployment? Add the domain in the Vercel Dashboard under Project > Domains. Point your DNS CNAME record to cname.vercel-dns.com or use Vercel's nameservers for automatic DNS management.

3. What happens when you create a pull request on a connected Git repository? Vercel automatically generates a preview deployment with a unique URL. The URL follows the pattern project-name-git-branch-hash.vercel.app.

4. Challenge: Multi-environment deployment pipeline

Set up a Vercel project with three environments:

• Production (main branch) with production database
• Staging (staging branch) with staging database
• Development (any branch) with local environment variables

Use GitHub branch protection rules and Vercel's autoJobCancelation to optimize the pipeline.

Mini Project: Full-Stack Vercel Deployment

Deploy a Next.js application with serverless API and Edge Functions:

1. Create a Next.js app with at least three pages and an API route
2. Create an Edge Function that returns geolocation data based on the request
3. Configure environment variables for production and preview
4. Set up a custom domain with automatic SSL
5. Create a pull request and verify the preview deployment
6. Configure security headers in next.config.js or vercel.json

# Deploy from CLI
vercel --prod

# Check deployment status
vercel list

# Open deployment
vercel open

This deployment pattern mirrors how DodaTech ships Doda Browser feature previews and DodaZIP marketing pages with zero-downtime deployments.

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.