Deployment Guide

This guide covers deploying TamborraData to production using Vercel, the recommended hosting platform for Next.js applications.

TamborraData is designed for Vercel deployment and takes advantage of Edge Functions, automatic scaling, and global CDN distribution.

Deployment Overview

Why Vercel?

Zero Configuration

Automatic Next.js detection and optimal build settings

Global CDN

Instant page loads from the nearest edge location

Automatic HTTPS

SSL certificates provisioned automatically

Preview Deployments

Every PR gets a unique preview URL

Analytics Built-in

Web Vitals and performance monitoring included

Serverless Functions

API routes scale automatically

Prerequisites

Before deploying, ensure you have:

GitHub Repository

TamborraData code pushed to a GitHub repository.

Vercel Account

Supabase Production Database

A Supabase project configured with production data.

Domain (Optional)

Custom domain for production (or use Vercel’s .vercel.app domain).

Step 1: Prepare Your Repository

Verify Build Locally

Before deploying, test the production build locally:

pnpm build
pnpm start

Visit http://localhost:3000 and verify:

✅ All pages load correctly
✅ No TypeScript errors
✅ No ESLint warnings
✅ Data fetches successfully
✅ Images and assets load

Fix all errors before deploying. Vercel will fail deployment if the build fails.

Required Files

Ensure these files exist in your repository:

├── package.json           # Dependencies and scripts
├── pnpm-lock.yaml         # Lock file for consistent installs
├── next.config.ts         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
├── .gitignore             # Files to exclude from Git
└── app/                   # Next.js app directory

Vercel automatically detects pnpm if pnpm-lock.yaml is present.

Step 2: Set Up Production Database

Create Production Supabase Project

Create new project

Go to supabase.com and create a new project:

Name: tamborradata-production
Region: Choose closest to your users
Plan: Free tier or Pro (depending on traffic)

Execute schema

In SQL Editor, run mocked_data/tamborradata_schema.sql to create tables.

Import production data

Import your real data (or mock data for initial deployment):

Use Table Editor to import CSVs
Or run SQL INSERT statements
Ensure available_years has correct years

Configure RLS

Verify Row Level Security is enabled:

-- Check RLS is enabled
SELECT tablename, rowsecurity 
FROM pg_tables 
WHERE schemaname = 'public';

All tables should show rowsecurity = true.

Get production credentials

Go to Settings > API and copy:

Project URL
anon key

Store these securely - you’ll add them to Vercel.

Never commit production credentials to Git. They should only exist in Vercel environment variables.

Step 3: Deploy to Vercel

Import Project

Connect GitHub

Go to vercel.com/new
Click Import Git Repository
Select your GitHub repository
Authorize Vercel to access the repo

Configure Project

Vercel auto-detects settings:

Framework Preset: Next.js ✅
Root Directory: ./ (or /source if in monorepo)
Build Command: pnpm build (auto-detected)
Output Directory: .next (auto-detected)
Install Command: pnpm install (auto-detected)

Leave defaults unless you have a custom setup.

Add Environment Variables

Click Environment Variables and add:

Name	Value
`SUPABASE_URL`	Your production Supabase URL
`SUPABASE_ANON_KEY`	Your production anon key

Select which environments:

✅ Production (required)
✅ Preview (recommended)
⬜ Development (optional)

Deploy

Click Deploy and wait 1-2 minutes.Vercel will:

Install dependencies with pnpm
Run pnpm build
Deploy to global edge network
Assign a .vercel.app URL

Success! Your site is live at https://your-project.vercel.app

Step 4: Configure Custom Domain

Add Domain to Vercel

Add domain

Go to Project Settings > Domains
Enter your domain (e.g., tamborradata.com)
Click Add

Configure DNS

Vercel provides DNS records to add at your registrar:Option A: A Record (Recommended)

Type: A
Name: @
Value: 76.76.21.21

Option B: CNAME

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

Add records at your domain registrar (GoDaddy, Namecheap, Cloudflare, etc.).

Add www subdomain (optional)

To support www.tamborradata.com:

Add www.tamborradata.com in Vercel Domains

Add CNAME record:

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

The next.config.ts redirect will automatically redirect www → non-www.

Wait for propagation

DNS changes take 5-60 minutes to propagate.Check status in Vercel Domains tab:

🟡 Pending: DNS not propagated yet
🟢 Valid: Domain configured correctly

SSL certificate

Vercel automatically provisions SSL certificates via Let’s Encrypt.Once domain is valid, HTTPS is enabled automatically.

Step 5: Configure Production Settings

Vercel Project Settings

General Settings

Project Name: tamborradata (or your preferred name)Build & Development Settings:

Framework Preset: Next.js
Build Command: pnpm build (default)
Output Directory: .next (default)
Install Command: pnpm install (default)
Node Version: 18.x (or 20.x)

Environment Variables

Ensure these are set for Production:

SUPABASE_URL="https://xxx.supabase.co"
SUPABASE_ANON_KEY="eyJ..."

Use different Supabase projects for Production vs Preview to avoid mixing test and real data.

Git Integration

Configure automatic deployments:Production Branch: main (or master)

Commits to this branch deploy to production

Preview Branches: All other branches

Every PR gets a unique preview URL
Great for testing before merging

Domains

Production Domain: tamborradata.comPreview Domains:

Branch previews: branch-name.vercel.app
PR previews: pr-123.vercel.app

Step 6: Enable Analytics

TamborraData includes Vercel Analytics and Speed Insights.

Web Analytics

Enable in Vercel

Go to Project > Analytics tab
Click Enable Analytics
Wait for first pageview

View metrics

Analytics show:

Visitors: Unique users
Page Views: Total views
Top Pages: Most visited routes
Referrers: Traffic sources
Countries: Geographic distribution

Speed Insights

Enable Speed Insights

Go to Project > Speed Insights tab
Click Enable Speed Insights

Monitor Web Vitals

Tracks:

LCP: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift
TTFB: Time to First Byte

Analytics are included in the Vercel Pro plan. Hobby (free) plan has limited analytics.

Deployment Workflow

Continuous Deployment

Every Git push triggers a new deployment:

Deployment Types

# Merge to main branch
git checkout main
git merge feature-branch
git push origin main

# Result: Deploys to production domain
# https://tamborradata.com

Rollback

To rollback to a previous version:

Find deployment

Go to Deployments tab and find the working version.

Promote to production

Click ”…” > Promote to Production.

Verify

Check production URL to confirm rollback.

Vercel keeps all deployment history. You can rollback to any previous version instantly.

Monitoring & Logs

Real-time Logs

View logs in Vercel dashboard:

Go to Project > Deployments
Click on a deployment
View Build Logs and Function Logs

Log Types

Build Logs

Shows build process output:

Dependency installation
TypeScript compilation
Next.js build
Static page generation

Check these if deployment fails.

Function Logs

Runtime logs from API routes:

Request/response logs
Errors and exceptions
Console.log output
Performance metrics

Use for debugging API issues.

Edge Logs

Logs from Edge Middleware:

Redirects
Rewrites
Header modifications

Available on Pro plan.

Troubleshooting Deployment

Build Failures

TypeScript Errors

Error: Type error: ...Solution:

# Test locally first
pnpm tsc --noEmit

# Fix errors, then commit
git add .
git commit -m "fix: resolve type errors"
git push

Missing Dependencies

Error: Module not found: Can't resolve '...'Solution:

# Ensure dependency is in package.json
pnpm add <missing-package>

# Commit lockfile
git add package.json pnpm-lock.yaml
git commit -m "fix: add missing dependency"
git push

Environment Variable Missing

Error: Database connection fails, blank pagesSolution:

Check Vercel Project Settings > Environment Variables
Ensure SUPABASE_URL and SUPABASE_ANON_KEY are set
Variables must be set for Production environment
Redeploy after adding variables

Build Timeout

Error: Build exceeded maximum durationSolutions:

Remove unused dependencies
Optimize build process
Upgrade to Vercel Pro (longer timeout)

Runtime Issues

API Routes Not Working

Problem: /api/* returns 404 or 500Solutions:

Check Function Logs for errors
Verify Supabase credentials in environment variables
Test API routes locally: pnpm build && pnpm start
Check for CORS issues (not common with same-origin API)

Database Connection Errors

Problem: Error connecting to SupabaseSolutions:

Verify SUPABASE_URL is correct
Check SUPABASE_ANON_KEY is the anon key, not service_role
Ensure Supabase project is not paused (free tier)
Check RLS policies allow read access

Slow Performance

Problem: Pages load slowlySolutions:

Check Speed Insights for specific metrics
Optimize images (use Next.js Image component)
Enable React Query caching (already configured)
Consider upgrading Supabase plan if database is slow

Security Best Practices

Critical Security Checklist

Never commit secrets

❌ Don’t commit .env.local
❌ Don’t commit SUPABASE_ANON_KEY in code
✅ Use Vercel Environment Variables

Use anon key only

❌ Never use service_role key in frontend
✅ Only use anon key for client connections
✅ RLS policies enforce data access rules

Enable HTTPS only

✅ Vercel enforces HTTPS automatically
✅ HSTS header configured in next.config.ts

Review RLS policies

✅ Ensure all tables have RLS enabled
✅ Policies allow only necessary access
✅ Test with anonymous user access

Keep dependencies updated

pnpm outdated
pnpm update

Regularly update to patch security vulnerabilities.

Performance Optimization

Next.js Optimizations (Already Configured)

TamborraData already implements these optimizations:

✅ Server Components: Default rendering strategy
✅ React Query Caching: Reduces API calls
✅ Image Optimization: Next.js Image component
✅ Code Splitting: Automatic per-route
✅ Compression: gzip/brotli enabled
✅ Edge Runtime: API routes run on Edge

Additional Optimizations

Consider these for even better performance:

Enable ISR (Incremental Static Regeneration)

// In page component
export const revalidate = 3600; // Revalidate every hour

Add Static Generation for stable pages

// For year pages that don't change
export async function generateStaticParams() {
  return [{ year: '2024' }, { year: '2025' }];
}

Optimize Supabase queries
- Use select() to fetch only needed columns
- Add indexes on frequently queried columns
- Enable connection pooling

Scaling Considerations

Traffic Handling

Vercel automatically scales:

Edge Network: Serves from 100+ global locations
Serverless Functions: Scale to zero, scale to millions
No configuration needed: Automatic load balancing

Database Scaling

For high traffic, consider:

Upgrade Supabase plan: More connections and better performance
Enable connection pooling: Use Supabase’s pooler
Add database indexes: Speed up queries
Implement caching: React Query + CDN caching

Next Steps

Monitor Performance

Set up alerts and monitoring in Vercel

Custom Domain Setup

Configure your production domain

CI/CD Pipeline

Automate testing before deployment

Backup Strategy

Set up automated Supabase backups

Congratulations! Your TamborraData instance is now live in production.

Get Started

Core Features

Architecture

Development

Advanced Topics

​Deployment Guide

​Deployment Overview

​Why Vercel?

Zero Configuration

Global CDN

Automatic HTTPS

Preview Deployments

Analytics Built-in

Serverless Functions

​Prerequisites

​Step 1: Prepare Your Repository

​Verify Build Locally

​Required Files

​Step 2: Set Up Production Database

​Create Production Supabase Project

​Step 3: Deploy to Vercel

​Import Project

​Step 4: Configure Custom Domain

​Add Domain to Vercel

​Step 5: Configure Production Settings

​Vercel Project Settings

​Step 6: Enable Analytics

​Web Analytics

​Speed Insights

​Deployment Workflow

​Continuous Deployment

​Deployment Types

​Rollback

​Monitoring & Logs

​Real-time Logs

​Log Types

​Troubleshooting Deployment

​Build Failures

​Runtime Issues

​Security Best Practices

​Performance Optimization

​Next.js Optimizations (Already Configured)

​Additional Optimizations

​Scaling Considerations

​Traffic Handling

​Database Scaling

​Next Steps

Monitor Performance

Custom Domain Setup

CI/CD Pipeline

Backup Strategy

Build docs developers (and LLMs) love

Deployment Guide

Deployment Overview

Why Vercel?

Prerequisites

Step 1: Prepare Your Repository

Verify Build Locally

Required Files

Step 2: Set Up Production Database

Create Production Supabase Project

Step 3: Deploy to Vercel

Import Project

Step 4: Configure Custom Domain

Add Domain to Vercel

Step 5: Configure Production Settings

Vercel Project Settings

Step 6: Enable Analytics

Web Analytics

Speed Insights

Deployment Workflow

Continuous Deployment

Deployment Types

Rollback

Monitoring & Logs

Real-time Logs

Log Types

Troubleshooting Deployment

Build Failures

Runtime Issues

Security Best Practices

Performance Optimization

Next.js Optimizations (Already Configured)

Additional Optimizations

Scaling Considerations

Traffic Handling

Database Scaling

Next Steps