Deploy to Vercel

Deploy your WhatsApp Team Inbox frontend to Vercel for optimal Next.js performance, automatic HTTPS, and global CDN.

TL;DR - Quick Deploy

Import to Vercel

Vercel → New Project → Import GitHub repo → Root: web

Set Env Variables

Add NEXT_PUBLIC_API_BASE_URL (your backend URL) and NEXT_PUBLIC_WS_URL

Deploy

Click Deploy. Vercel builds and deploys with auto-HTTPS. Done! ✅

Total time: ~5 minutes | Cost: Free tier available Best paired with: Railway backend (see Railway guide)

Overview

Vercel is designed specifically for Next.js applications and provides the best performance for your frontend.

Next.js Optimized

Built by the Next.js team for Next.js apps

Global CDN

Automatic edge deployment worldwide

Auto HTTPS

Free SSL certificates included

Free Tier

Generous free tier for personal projects

Architecture

For a complete deployment, use Vercel for frontend + Railway for backend:

Prerequisites

GitHub account

Vercel account (sign up at vercel.com)

Backend deployed (Railway, Heroku, or VPS)

Backend API URL available

Quick Deploy

Option 1: Deploy Button

Option 2: Manual Deployment

Fork Repository

Go to WhatsApp Team Inbox repository
Click Fork to create your copy

Import to Vercel

Log in to Vercel
Click Add New… → Project
Click Import next to your forked repository

Configure Project

Framework Preset: Next.js (auto-detected)Root Directory: webBuild Command: npm run build (default)Output Directory: .next (default)Install Command: npm install (default)

Set Environment Variables

Add required environment variables:

NEXT_PUBLIC_API_BASE_URL=https://your-backend.railway.app
NEXT_PUBLIC_WS_URL=wss://your-backend.railway.app

Click Deploy

Environment Variables

Configure these in Vercel dashboard → Project → Settings → Environment Variables:

Required Variables

NEXT_PUBLIC_API_BASE_URL

string

required

Backend API URLExample: https://api.your-domain.com or https://your-app.railway.appNote: Must use HTTPS in production

NEXT_PUBLIC_WS_URL

string

required

WebSocket server URLExample: wss://api.your-domain.com or wss://your-app.railway.appNote: Must use WSS (secure WebSocket) in production

Optional Variables

NEXT_PUBLIC_APP_ENV

string

default:"production"

Application environmentOptions: production, staging, development

NEXT_PUBLIC_ENABLE_ANALYTICS

boolean

default:"false"

Enable analytics trackingSet to true to enable built-in analytics

Environment-Specific Variables

Vercel supports different variables per environment:

Production
Preview
Development

Used for production deployments (main branch)

NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com
NEXT_PUBLIC_WS_URL=wss://api.your-domain.com

Custom Domain

Add Your Domain

Access Domain Settings

Project → Settings → Domains

Add Domain

Click Add and enter your domain:

app.your-domain.com (recommended for subdomain)
your-domain.com (for root domain)

Configure DNS

Add DNS records at your domain registrar:For subdomain (app.your-domain.com):

Type: CNAME
Name: app
Value: cname.vercel-dns.com

For root domain (your-domain.com):

Type: A
Name: @
Value: 76.76.21.21

Verify Domain

Vercel will automatically verify your domain and issue SSL certificateUsually takes 1-5 minutes

Update Backend CORS

Update your backend’s CORS_ORIGIN to include new domain:

# In Railway/backend environment
CORS_ORIGIN=https://app.your-domain.com

Deployment Settings

Build & Development Settings

Configure in Project → Settings → General:

Framework Preset

Next.js (auto-detected)Optimizes build for Next.js best practices

Root Directory

Set to web if your Next.js app is in a subdirectoryLeave blank if Next.js is at repository root

Build Command

Default: npm run buildCustom: Can override for monorepos or special cases

Output Directory

Default: .nextNote: Don’t change unless using custom Next.js config

Install Command

Default: npm installAlternative: Use pnpm install or yarn install

Git Configuration

Set Production Branch

Settings → Git → Production BranchRecommended: main or master

Enable Auto-Deploy

✅ Deploy on Push - Auto-deploy when you push to production branch

Configure Preview Deployments

✅ Preview Deployments - Create preview for every pull requestThis allows testing changes before merging to main

Preview Deployments

Vercel automatically creates preview deployments for every push and pull request:

How Preview Works

Create Pull Request

git checkout -b feature/new-ui
git push origin feature/new-ui

Automatic Deployment

Vercel automatically deploys your branchYou’ll get a unique preview URL:

https://whatsapp-inbox-abc123.vercel.app

Test Changes

Test your changes in the preview environmentPreview deployments have their own environment variables (set in Preview section)

Merge to Production

Once approved, merge to main branch:

git checkout main
git merge feature/new-ui
git push origin main

Production deployment automatically triggers

Every preview deployment gets a unique URL you can share:

Go to your project dashboard
Click on the preview deployment
Click Visit to open preview
Share URL with team for review

Performance Optimization

Next.js Configuration

Optimize your Next.js app for Vercel:

// web/next.config.js
module.exports = {
  // Enable React Strict Mode
  reactStrictMode: true,

  // Optimize images
  images: {
    domains: ['your-backend-domain.com'],
    formats: ['image/avif', 'image/webp'],
  },

  // Compress output
  compress: true,

  // Enable SWC minification
  swcMinify: true,

  // Production source maps (for debugging)
  productionBrowserSourceMaps: true,
};

Image Optimization

Use Next.js Image component for automatic optimization:

import Image from 'next/image';

// Instead of:
<img src="/logo.png" alt="Logo" />

// Use:
<Image
  src="/logo.png"
  alt="Logo"
  width={200}
  height={50}
  priority // For above-the-fold images
/>

Bundle Analysis

Analyze your bundle size:

Install Analyzer

cd web
npm install @next/bundle-analyzer

Update next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // ... other config
});

Run Analysis

ANALYZE=true npm run build

Opens interactive bundle size visualization

Monitoring

Analytics

Vercel provides built-in analytics:

Enable Analytics

Project → Analytics → EnableFree tier: 100k data points/month

View Metrics

Monitor:

Page views
Unique visitors
Top pages
Referrers
Countries

Speed Insights

Monitor real user performance:

Enable Speed Insights

cd web
npm install @vercel/speed-insights

Add to App

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

View Reports

Project → Speed InsightsSee Core Web Vitals scores

Serverless Functions

Vercel supports Next.js API routes as serverless functions:

Example API Route

// web/pages/api/health.js
export default function handler(req, res) {
  res.status(200).json({
    status: 'ok',
    timestamp: new Date().toISOString()
  });
}

Deployed automatically at: https://your-app.vercel.app/api/health

Function Configuration

// web/pages/api/your-function.js
export const config = {
  runtime: 'edge', // Use edge runtime for lowest latency
  regions: ['iad1'], // Specify deployment region
  maxDuration: 10, // Max execution time (seconds)
};

CI/CD Integration

GitHub Integration

Vercel integrates seamlessly with GitHub:

Automatic Deploys

Every push to main triggers production deploy

PR Previews

Every pull request gets a preview deployment

Status Checks

Build status shown in pull requests

Rollbacks

One-click rollback to previous deployment

Deployment Protection

Enable deployment protection for production:

Access Protection Settings

Settings → Deployment Protection

Configure Rules

✅ Vercel Authentication - Require login to view previews
✅ Password Protection - Add password to previews
✅ Trusted IPs - Whitelist IP addresses

Troubleshooting

Build Failed

Common causes:

TypeScript errors
Missing environment variables
Build timeout

Solutions:

Check build logs in deployment details
Fix TypeScript errors locally first
Verify all NEXT_PUBLIC_ variables are set
Contact support if timeout persists

Can't Connect to Backend

Causes:

NEXT_PUBLIC_API_BASE_URL incorrect
CORS not configured on backend
Backend not deployed

Solutions:

Verify NEXT_PUBLIC_API_BASE_URL uses HTTPS
Check backend CORS_ORIGIN includes Vercel domain
Test backend health endpoint directly

WebSocket Connection Failed

Causes:

Using WS instead of WSS
Backend WebSocket not accessible
Firewall blocking WebSocket

Solutions:

Ensure NEXT_PUBLIC_WS_URL uses wss:// (not ws://)
Test WebSocket endpoint with wscat
Check backend WebSocket server is running

Environment Variables Not Working

Causes:

Variable name doesn’t start with NEXT_PUBLIC_
Not redeployed after adding variables
Using wrong environment

Solutions:

Client-side variables must start with NEXT_PUBLIC_
Redeploy after adding/changing variables
Check you’re using correct environment (Production/Preview/Development)

Cost Optimization

Free Tier Limits

Vercel’s free tier is generous and suitable for most small projects:

100 GB bandwidth/month
100 deployments/day
Unlimited preview deployments
6,000 build minutes/month
Analytics (100k data points)

Upgrade to Pro

Consider Pro plan ($20/month) when you need:

More bandwidth (1 TB)
Priority support
Team collaboration
Advanced analytics
Password protection

Production Checklist

Backend deployed and accessible

Environment variables configured

Custom domain added (optional)

SSL certificate active

CORS configured on backend

Analytics enabled

Error tracking set up

Performance monitoring enabled

Preview deployments tested

Vercel + Railway Complete Setup

For a complete production setup:

Deploy Backend to Railway

Follow Railway deployment guide

Get Railway URLs

Copy backend and WebSocket URLs from Railway

Deploy Frontend to Vercel

Use Railway URLs in Vercel environment variables

Configure Custom Domains

Frontend: app.your-domain.com (Vercel)
Backend: api.your-domain.com (Railway)

Update CORS

Set Railway backend CORS to Vercel domain

Next Steps

Railway Backend

Deploy backend to Railway

Environment Variables

Complete environment reference

Going Live

Production deployment checklist

Performance

Optimize frontend performance

Deployment Guide

Platform Deployments

​Deploy to Vercel

​TL;DR - Quick Deploy

​Overview

Next.js Optimized

Global CDN

Auto HTTPS

Free Tier

​Architecture

​Prerequisites

​Quick Deploy

​Option 1: Deploy Button

​Option 2: Manual Deployment

​Environment Variables

​Required Variables

​Optional Variables

​Environment-Specific Variables

​Custom Domain

​Add Your Domain

​Deployment Settings

​Build & Development Settings

​Git Configuration

​Preview Deployments

​How Preview Works

​Share Preview with Team

​Performance Optimization

​Next.js Configuration

​Image Optimization

​Bundle Analysis

​Monitoring

​Analytics

​Speed Insights

​Serverless Functions

​Example API Route

​Function Configuration

​CI/CD Integration

​GitHub Integration

Automatic Deploys

PR Previews

Status Checks

Rollbacks

​Deployment Protection

​Troubleshooting

​Cost Optimization

​Free Tier Limits

​Upgrade to Pro

​Production Checklist

​Vercel + Railway Complete Setup

​Next Steps

Railway Backend

Environment Variables

Going Live

Performance

​Resources

Deploy to Vercel

TL;DR - Quick Deploy

Overview

Architecture

Prerequisites

Quick Deploy

Option 1: Deploy Button

Option 2: Manual Deployment

Environment Variables

Required Variables

Optional Variables

Environment-Specific Variables

Custom Domain

Add Your Domain

Deployment Settings

Build & Development Settings

Git Configuration

Preview Deployments

How Preview Works

Share Preview with Team

Performance Optimization

Next.js Configuration

Image Optimization

Bundle Analysis

Monitoring

Analytics

Speed Insights

Serverless Functions

Example API Route

Function Configuration

CI/CD Integration

GitHub Integration

Deployment Protection

Troubleshooting

Cost Optimization

Free Tier Limits

Upgrade to Pro

Production Checklist

Vercel + Railway Complete Setup

Next Steps

Resources