Deploy to Vercel

Overview

Cajas is optimized for deployment on Vercel, leveraging Next.js 16’s advanced features including React Compiler and server-side rendering. This guide walks through the complete deployment process from initial setup to custom domain configuration.

Pre-Deployment Checklist

Before deploying to production, ensure you have:

Supabase Project

Production Supabase project created
All migrations applied
RLS policies enabled and tested
Auth providers configured

Environment Variables

Production API keys secured
Database connection strings ready
Third-party service credentials prepared

Code Quality

Build passes locally (npm run build)
No TypeScript errors
Lint checks pass (npm run lint)

Initial Deployment

1. Connect to Vercel

# Install Vercel CLI
npm i -g vercel

# Login to your account
vercel login

# Deploy from project directory
cd workspace/source
vercel

2. Configure Build Settings

Vercel automatically detects Next.js projects. Verify these settings:

Build Configuration

Framework Preset: Next.js
Build Command: next build
Output Directory: .next
Install Command: npm install
Node Version: 20.x (recommended)

Advanced Settings

next.config.ts

{
  "reactCompiler": true,
  "productionBrowserSourceMaps": false,
  "webpack": {
    "ignoreWarnings": [
      { "module": "/node_modules/" },
      { "message": "/sourceMapURL/" }
    ]
  }
}

The configuration in next.config.ts:3-14 enables:

React Compiler for optimized rendering
Disabled source maps for security
Webpack warning suppression

Environment Variables

Required Variables

Configure these environment variables in your Vercel project settings:

NEXT_PUBLIC_SUPABASE_URL

string

required

Your Supabase project URL

https://your-project.supabase.co

Used in: lib/supabase/server.ts:8, lib/supabase/client.ts:5

NEXT_PUBLIC_SUPABASE_ANON_KEY

string

required

Supabase anonymous (public) key for client-side requests

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Used in: lib/supabase/server.ts:9, lib/supabase/client.ts:6

SUPABASE_SERVICE_ROLE_KEY

string

required

Service role key for server-side admin operations (keep secret)

Never expose this key in client-side code. Only use in API routes and server components.

Setting Variables on Vercel

Dashboard
CLI
Bulk Import

Navigate to your project on Vercel
Go to Settings → Environment Variables
Add each variable with appropriate scope:
- Production: Live environment
- Preview: Pull request deployments
- Development: Local development
Click Save

# Add production variable
vercel env add NEXT_PUBLIC_SUPABASE_URL production

# Add to all environments
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY

# Pull variables to local .env
vercel env pull

Create a .env.production file:

.env.production

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Then import via CLI:

vercel env import .env.production

Custom Domains

Adding a Domain

Add Domain in Vercel

Go to Settings → Domains
Enter your domain (e.g., cajas.club)
Click Add

Configure DNS

Add these DNS records at your domain provider:

Type: A
Name: @
Value: 76.76.21.21
TTL: 3600

Verify Configuration

Vercel will automatically verify DNS propagation. This typically takes 5-10 minutes but can take up to 48 hours.Check status:

vercel domains inspect cajas.club

Configure SSL

SSL certificates are automatically provisioned and renewed by Vercel using Let’s Encrypt. No additional configuration needed.

Domain Best Practices

Apex Domain

Use cajas.club as primary domain for better SEO and branding

WWW Redirect

Configure automatic redirect from www.cajas.club to apex domain

HTTPS Only

Enable “Redirect to HTTPS” in domain settings

HSTS

Enable HTTP Strict Transport Security in headers

Production Optimizations

Performance Configuration

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains"
        }
      ]
    },
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

Next.js Configuration

The production build leverages several optimizations:

React Compiler

Enabled via reactCompiler: true in next.config.ts:5Benefits:

Automatic memoization
Reduced bundle size
Improved runtime performance
Better code splitting

Source Maps

Disabled via productionBrowserSourceMaps: false in next.config.ts:6Security benefits:

Prevents source code exposure
Reduces bundle size
Faster page loads

Webpack Optimizations

Configured in next.config.ts:7-13

webpack: (config) => {
  config.ignoreWarnings = [
    { module: /node_modules/ },
    { message: /sourceMapURL/ }
  ];
  return config;
}

Deployment Workflow

Automatic Deployments

Vercel provides automatic deployments for every push:

Push to Branch

git checkout -b feature/new-feature
git add .
git commit -m "Add new feature"
git push origin feature/new-feature

Preview Deployment

Vercel automatically creates a preview deployment with a unique URL:

https://cajas-{hash}-yourteam.vercel.app

Preview deployments include:

Full production build
Preview environment variables
Unique URL for testing
Comment on PR with deployment link

Production Deployment

Merge to main branch triggers production deployment:

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

Production deployment:

Updates live site
Invalidates CDN cache
Runs on custom domain

Manual Deployments

# Redeploy latest commit
vercel --prod

Troubleshooting

Build Failures

Symptom: Deployment fails during build stepSolutions:

Check build logs in Vercel dashboard
Verify environment variables are set
Test build locally:
```
npm run build
npm start
```
Check for TypeScript errors
Verify all dependencies are in package.json

Runtime Errors

Symptom: Build succeeds but application crashes at runtimeSolutions:

Check function logs in Vercel dashboard

Verify Supabase connection:

// Test in API route
const { data, error } = await supabase.from('cases').select('count');
console.log({ data, error });

Check CORS configuration
Verify environment variables are accessible

Database Connection Issues

Symptom: Cannot connect to SupabaseSolutions:

Verify NEXT_PUBLIC_SUPABASE_URL is correct
Check Supabase project is active
Verify API keys are not expired
Test connection in Supabase dashboard
Check network/firewall settings

Domain Not Working

Symptom: Custom domain shows error or doesn’t loadSolutions:

Verify DNS propagation:
```
dig cajas.club
nslookup cajas.club
```
Check DNS records match Vercel requirements
Wait for DNS propagation (up to 48 hours)
Verify domain is not already in use
Check domain registrar settings

Post-Deployment

Monitor Performance

Set up logging and monitoring for production traffic

Security Review

Verify security policies and RLS rules are working

Analytics

Configure Vercel Analytics for user insights

Alerts

Set up deployment and error notifications

Next Steps: After deployment, review the Security Best Practices and set up Monitoring to ensure your production environment is secure and observable.

Setup

Production

Deploy to Vercel

Overview

Pre-Deployment Checklist

Initial Deployment

1. Connect to Vercel

2. Configure Build Settings

Environment Variables

Required Variables

Setting Variables on Vercel

Custom Domains

Adding a Domain

Domain Best Practices

Apex Domain

WWW Redirect

HTTPS Only

HSTS

Production Optimizations

Performance Configuration

Next.js Configuration

Deployment Workflow

Automatic Deployments

Manual Deployments

Troubleshooting

Post-Deployment

Monitor Performance

Security Review

Analytics

Alerts

Build docs developers (and LLMs) love

Setup

Production

​Overview

​Pre-Deployment Checklist

​Initial Deployment

​1. Connect to Vercel

​2. Configure Build Settings

​Environment Variables

​Required Variables

​Setting Variables on Vercel

​Custom Domains

​Adding a Domain

​Domain Best Practices

Apex Domain

WWW Redirect

HTTPS Only

HSTS

​Production Optimizations

​Performance Configuration

​Next.js Configuration

​Deployment Workflow

​Automatic Deployments

​Manual Deployments

​Troubleshooting

​Post-Deployment

Monitor Performance

Security Review

Analytics

Alerts

Build docs developers (and LLMs) love

Overview

Pre-Deployment Checklist

Initial Deployment

1. Connect to Vercel

2. Configure Build Settings

Environment Variables

Required Variables

Setting Variables on Vercel

Custom Domains

Adding a Domain

Domain Best Practices

Production Optimizations

Performance Configuration

Next.js Configuration

Deployment Workflow

Automatic Deployments

Manual Deployments

Troubleshooting

Post-Deployment