Vercel Reference

Overview

Vercel is optimized for modern web frameworks and serverless deployment:

⚛️ Next.js - First-class support (same company)
🚀 React/Vue/Svelte - All supported
🔥 Serverless Functions - Built-in API routes
⚡ Edge Runtime - Global performance

Domain Configuration

{
  "owner": {
    "username": "username",
    "email": "user@example.com"
  },
  "records": {
    "CNAME": "cname.vercel-dns.com"
  }
}

CNAME Targets

Project Type	CNAME Target
Standard	`cname.vercel-dns.com`
Custom	`project-name.vercel.app`
Enterprise	Custom CNAME provided

Setup Process

1. Deploy to Vercel

# Via CLI
npm i -g vercel
vercel

# Or connect GitHub repo via dashboard

2. Add Custom Domain

Dashboard → Select project
Settings → Domains
Add → username.loves-to.dev
Vercel shows CNAME target
Use that target in your JSON file

3. Domain Verification

Vercel auto-verifies within minutes
SSL certificate provisions automatically
Status shown in dashboard

Framework Configuration

Next.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // For static export
  trailingSlash: true,
  images: {
    unoptimized: true // For static export
  }
}

module.exports = nextConfig

React (Vite)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/', // Important for custom domains
  build: {
    outDir: 'dist'
  }
})

Astro

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://username.loves-to.dev',
  output: 'static',
  adapter: vercel()
});

Environment Variables

Production Settings

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://username.loves-to.dev
API_BASE_URL=https://username.loves-to.dev/api

Local Development

NEXT_PUBLIC_SITE_URL=http://localhost:3000
API_BASE_URL=http://localhost:3000/api

Serverless Functions

API Routes (Next.js)

export default function handler(req, res) {
  res.status(200).json({
    message: 'Hello from loves-to.dev!',
    timestamp: new Date().toISOString(),
    method: req.method
  });
}

Edge Functions

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

export default async function handler(req) {
  return new Response(
    JSON.stringify({
      location: req.geo?.city || 'Unknown',
      country: req.geo?.country || 'Unknown'
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
      },
    }
  )
}

Build Configuration

vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "nextjs",
  "functions": {
    "pages/api/**/*.js": {
      "maxDuration": 10
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ]
}

Performance Optimization

Image Optimization

module.exports = {
  images: {
    domains: ['username.loves-to.dev'],
    formats: ['image/webp', 'image/avif'],
  },
}

Caching Headers

{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Monitoring & Analytics

Vercel Analytics

import { Analytics } from '@vercel/analytics/react';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

Error Tracking

Built-in error tracking in dashboard
Real-time function logs
Performance metrics included

Common Issues

Build Failures

Check Node.js version compatibility
Verify all dependencies are listed
Review build logs in dashboard

Domain Verification Issues

Ensure CNAME points to correct target
Wait up to 48 hours for DNS propagation
Contact Vercel support if stuck

Function Timeouts

Hobby plan: 10 seconds max
Pro plan: 60 seconds max
Optimize function performance