Vercel Deployment Setup: Configuration, Serverless, CI/CD

Vercel Deployment Setup: Configuration, Serverless, CI/CD

Imagine: you trigger a Vercel deployment, but on production an error appears that wasn't there locally. Hydration mismatch, wrong environment variables, or PR review dragging on due to missing preview links. We've encountered this dozens of times and know how to configure Vercel so deployment stops being a bottleneck. On one project with Next.js 14, we optimized Serverless Functions by splitting a monolithic function into several microservices — this cut API response time by 40% (making the API 1.7x faster) and reduced cold start from 3 seconds to 200 ms. Additionally, it lowered Serverless Functions costs by roughly $200 per month.

We are a team of engineers with five years of experience in Next.js and React development. Over that time, we've configured Vercel for 30+ projects — from landing pages to complex dashboards with Serverless Functions. We guarantee stable operation after deployment.

How Vercel Solves the Environment Problem?

Vercel automatically creates three environments: Production, Preview, and Development. Each has its own environment variables, domains, and settings. Preview Deployments for every PR provide a ready-made link for review before merge. This eliminates the "but it worked locally" issue.

We've handled over 500 deployments and reduced rollback time by 60% after implementing Preview Deployments: now every PR is tested against an exact copy of production.

How to Connect a Custom Domain?

1. In the Vercel dashboard, open Project → Settings → Domains.
2. Add the domain and configure DNS records (CNAME).
3. Wait for verification (usually 2–5 minutes).
4. Set up redirects (www to non-www) in vercel.json.

Vercel Configuration: From Connection to Production

Connecting a Project

# Install CLI npm install -g vercel # Deploy from current directory vercel # Deploy with settings vercel --prod # production vercel --env preview # staging 

Configuring vercel.json

The configuration file vercel.json controls routing, security headers, regions, and build commands. Below is an example for a Vite project with an API proxy and strict headers.

{ "buildCommand": "npm run build", "outputDirectory": "dist", "installCommand": "npm ci", "framework": "vite", "rewrites": [ { "source": "/api/(.*)", "destination": "https://api.github.com/$1" }, { "source": "/(.*)", "destination": "/index.html" } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" } ] }, { "source": "/assets/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] } ], "regions": ["fra1", "iad1"] } 

Adding Serverless Functions

Serverless computing is a cloud execution model in which the cloud provider dynamically manages the allocation and provisioning of servers (source: Wikipedia).

Serverless Functions in Node.js, Python, Go are ideal for API proxies, sending emails, processing webhooks. Over 99.99% uptime is typical for Vercel Serverless Functions. Example of a contact form handler using Resend:

// api/contact.ts (Vercel Edge Function) import type { VercelRequest, VercelResponse } from '@vercel/node'; export default async function handler(req: VercelRequest, res: VercelResponse) { if (req.method !== 'POST') { return res.status(405).json({ error: 'Method not allowed' }); } const { name, email, message } = req.body; // Send via Resend const response = await fetch('https://api.resend.com/emails', { method: 'POST', headers: { Authorization: `Bearer ${process.env.RESEND_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ from: '[email protected]', to: '[email protected]', subject: `New message from ${name}`, html: `<p>${message}</p>`, }), }); return res.status(response.ok ? 201 : 500).json({ ok: response.ok }); } 

Automation with GitHub Actions

For deployment automation we use GitHub Actions. Push to main triggers production deploy, opening a PR triggers preview. This pipeline has reduced manual deployment errors by 80% in our projects. Example workflow:

# .github/workflows/deploy.yml name: Deploy to Vercel on: push: branches: [main] pull_request: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Deploy to Vercel uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }} 

Environment Variables for Different Environments

# Add via CLI vercel env add DATABASE_URL production vercel env add API_KEY preview # View vercel env ls 

In Vercel Dashboard → Project → Settings → Environment Variables. Different values for Production, Preview, Development. Do not store keys in code — use service accounts.

How to Set Up Preview Deployments?

Every PR automatically gets a unique URL like myapp-git-feature-branch-org.vercel.app. Useful for design review, QA testing. You can add Basic Auth to preview environments by specifying the authentication field in vercel.json.

Preview Deployments automatically deploy every PR to a unique URL with its own application instance and isolated environment variables. This allows testing changes in conditions identical to production before merging. For privacy, Basic Auth can be configured.

Why Vercel Wins Over Traditional Hosting?

Our clients typically see a 30% reduction in hosting costs, saving $150–$300 per month. Our Vercel setup service starts at $500 for basic projects and scales with complexity.

What's Included?

• Audit of current repository and build configuration
• Vercel project setup (environment variables, domains, SSL)
• Optimization of Serverless Functions (splitting, caching, error handling)
• CI/CD configuration via GitHub Actions or GitLab CI
• Documentation on deployment and architecture
• Team training on Preview Deployments
• Support for 2 weeks after delivery

Vercel Limitations

Vercel has several limitations: Serverless Functions cannot run longer than 10 seconds (up to 60 seconds on Pro plan), persistent WebSocket connections are not supported, and PHP applications (Laravel) do not work in the Serverless environment. For such scenarios, traditional hosting or Edge Runtime is better.

Timeline & Pricing

Connecting a Next.js/React project to Vercel: 4–8 hours including environment variables and domain setup. For complex projects with custom functions and CI/CD — up to 12 hours. We'll give an accurate estimate after analyzing your repository. Pricing starts at $500 for a simple Next.js app setup. We've completed over 30 Vercel setups.

Order the setup — and forget about environment problems. Contact us for a consultation: we'll help configure Vercel for your project.