Deploy to Vercel

Vercel is the recommended deployment platform for Portfolio CMS. It provides seamless integration with Next.js and easy configuration.

Prerequisites

• GitHub account with your code pushed
• Vercel account (vercel.com)
• PostgreSQL database ready
• S3 storage configured

Step-by-Step Deployment

Step 1: Connect Repository

1. Go to vercel.com/new
2. Click "Import Git Repository"
3. Select your GitHub repository
4. Click "Import"

Step 2: Configure Project

Vercel will auto-detect Next.js. Verify settings:

Setting	Value
Framework Preset	Next.js
Root Directory	./
Build Command	pnpm ci:build
Output Directory	.next
Install Command	pnpm install

Step 3: Add Environment Variables

Click "Environment Variables" and add:

DATABASE_URL=postgresql://user:password@host:5432/database?sslmode=require
PAYLOAD_SECRET=your-super-secret-key-at-least-32-characters
NEXT_PUBLIC_SITE_URL=https://your-project.vercel.app

S3_BUCKET=your-bucket-name
S3_ACCOUNT_ID=your-account-id
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET=your-secret-key

# Optional
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=...
RESEND_FROM_NAME=...

Important

Use your actual production values, not development placeholders.

Step 4: Deploy

1. Click "Deploy"
2. Wait for build to complete (3-5 minutes)
3. Your site is live!

Using Vercel Postgres

Vercel offers integrated PostgreSQL:

Setup

1. Go to your project's Storage tab
2. Click "Create Database" > "Postgres"
3. Follow the setup wizard
4. Environment variables are auto-added

Connection String

Vercel Postgres uses POSTGRES_URL by default. Update your config if needed:

DATABASE_URL=${POSTGRES_URL}

Or update payload.config.ts:

db: postgresAdapter({
  pool: {
    connectionString: process.env.POSTGRES_URL || process.env.DATABASE_URL,
  },
}),

Custom Domain

Adding a Domain

1. Go to Project Settings > Domains
2. Enter your domain name
3. Click "Add"

DNS Configuration

Add these records at your registrar:

For apex domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain:

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

SSL Certificate

Vercel automatically provisions SSL certificates. No configuration needed.

Build Configuration

Build Command Options

Standard build:

pnpm build

With migrations:

payload migrate && pnpm build

CI-specific script:

pnpm ci:build

Environment-Specific Builds

Create different environments in Vercel:

• Production: Main branch
• Preview: Pull requests
• Development: Dev branch

Each can have different environment variables.

Deployment Settings

Automatic Deployments

By default, Vercel deploys:

• Every push to main branch
• Every pull request (preview)

Disable Automatic Deployments

If needed:

1. Project Settings > Git
2. Toggle off "Auto-Deployments"

Ignored Build Step

Skip builds for certain files:

# vercel-ignore-build-step.sh
if [[ "$VERCEL_GIT_COMMIT_MESSAGE" == *"[skip ci]"* ]]; then
  echo "Skipping build"
  exit 0
fi
exit 1

Troubleshooting

Build Fails

Check build logs:

1. Go to Deployments tab
2. Click failed deployment
3. View build logs

Common issues:

# TypeScript errors
Error: Type error: ...

# Fix: Run locally first
pnpm typecheck
pnpm generate:types

# Memory issues
FATAL ERROR: Reached heap limit

# Fix: Add to build command
NODE_OPTIONS="--max-old-space-size=4096" pnpm build

# Missing environment variables
Error: Missing required environment variable

# Fix: Check all env vars are set in Vercel dashboard

Database Connection Failed

1. Check DATABASE_URL is correct
2. Verify database is accessible
3. Check SSL mode (?sslmode=require)
4. Whitelist Vercel IPs if needed

Images Not Loading

1. Verify S3 credentials
2. Check CORS configuration
3. Ensure bucket exists
4. Check file permissions

Admin Panel 404

1. Ensure build completed successfully
2. Check for errors in function logs
3. Verify Payload routes are correct

Performance Optimization

Edge Functions

For faster response times:

// next.config.mjs
export default {
  experimental: {
    runtime: 'edge',
  },
}

Image Optimization

Vercel automatically optimizes images. Ensure:

• Images use next/image
• Proper sizing configured
• Domains whitelisted

Caching

Configure cache headers:

// next.config.mjs
export default {
  headers: async () => [
    {
      source: '/:path*',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        },
      ],
    },
  ],
}

Monitoring

Vercel Analytics

Enable in Project Settings:

• Web Analytics: Page views, visitors
• Speed Insights: Core Web Vitals

Logs

View function logs:

1. Go to Deployments
2. Select deployment
3. Click "Functions" tab
4. View real-time logs

Alerts

Set up deployment notifications:

1. Project Settings > Notifications
2. Configure Slack, Discord, or email alerts