Production Deployment - Procurement Calendar

This guide covers deploying the Procurement Calendar application to a production environment. We recommend Vercel for seamless Next.js deployment, but also cover alternative platforms.

Pre-Deployment Checklist

Before deploying to production, ensure you have:

✅ Completed Supabase setup with production database
✅ Configured all environment variables
✅ Tested the application locally with production database
✅ Reviewed and customized catalog data (suppliers, products, destinations)
✅ Created at least one admin user

Deployment Options

Vercel (Recommended)

Vercel is the recommended platform for Next.js applications with zero-configuration deployment.

Connect Your Repository

Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
Log in to Vercel
Click New Project
Import your repository
Vercel will automatically detect it’s a Next.js project

Configure Environment Variables

In the deployment configuration screen:

Expand Environment Variables section
Add all three required variables:

Name	Value
`NEXT_PUBLIC_SUPABASE_URL`	Your Supabase project URL
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Your Supabase anon key
`SUPABASE_SERVICE_ROLE_KEY`	Your service role key

Select which environments each variable applies to:
- ✅ Production
- ✅ Preview
- ✅ Development (optional)

Mark SUPABASE_SERVICE_ROLE_KEY as sensitive to prevent it from being displayed in logs.

Deploy

Click Deploy
Vercel will:
- Install dependencies
- Build your Next.js application
- Deploy to a production URL
Wait for deployment to complete (usually 2-3 minutes)

Your application will be available at https://your-project.vercel.app

Configure Custom Domain (Optional)

To use a custom domain:

Go to your project Settings → Domains
Add your domain (e.g., procurement.clorodehidalgo.com)
Configure DNS records as instructed by Vercel:
- A Record: Point to Vercel’s IP
- CNAME: Or point to cname.vercel-dns.com
Wait for DNS propagation (up to 48 hours)

Vercel provides automatic SSL certificates via Let’s Encrypt.

Update Supabase Redirect URLs

After deployment, update authentication redirect URLs:

Go to your Supabase dashboard
Navigate to Authentication → URL Configuration
Add your production URL to Redirect URLs:
- https://your-project.vercel.app/**
- https://your-custom-domain.com/** (if using custom domain)
Set Site URL to your production domain

Alternative Platforms

Netlify

Connect Git repository
Build command: npm run build
Publish directory: .next
Add environment variables in site settings

Railway

Create new project from GitHub repo
Add environment variables
Railway auto-detects Next.js and deploys

Render

Create new Web Service
Build command: npm install && npm run build
Start command: npm start
Add environment variables

Docker

Use Next.js standalone output for containerized deployments.

Build Configuration

Build Command

The application uses the standard Next.js build process:

npm run build

This command:

Compiles TypeScript to JavaScript
Optimizes and bundles all pages
Generates static pages where possible
Creates production-ready assets

Build Output

Next.js generates the following:

.next/
├── cache/              # Build cache for faster rebuilds
├── server/             # Server-side code
├── static/             # Static assets and chunks
└── standalone/         # Self-contained deployment (if configured)

The .next directory should never be committed to version control.

Environment-Specific Configuration

Production vs. Development

Key differences in production:

Feature	Development	Production
Source Maps	Enabled	Disabled for performance
Hot Reload	Enabled	N/A
Error Overlay	Detailed	Generic error pages
Caching	Minimal	Aggressive
Minification	None	Full

Node Environment

Next.js automatically sets NODE_ENV=production during production builds.

Database Considerations

Production Database Setup

Use Separate Supabase Project

Create a dedicated Supabase project for production:

Isolates production data from development
Allows safe testing in development
Prevents accidental data loss

Run Schema Migration

Execute the same schema.sql in your production Supabase project:

-- Run this in Supabase SQL Editor for production project
-- Copy from: supabase/schema.sql

Customize Seed Data

Review and modify seed data before production:

Proveedores: Add your actual suppliers
Productos: List your real products
Destinos: Configure your plant locations
Presentaciones: Adjust to your packaging types

Remove or modify sample seed data to match your business requirements.

Backups

Supabase automatically backs up your database:

Free tier: Daily backups retained for 7 days
Pro tier: Daily backups retained for 30 days
Manual backups: Available in Supabase dashboard under Database → Backups

For critical production data, consider implementing additional backup strategies.

Performance Optimization

Caching Strategy

The application uses Next.js caching:

import { unstable_cache } from 'next/cache'

// Example: Cache catalog data
export const getCatalogData = unstable_cache(
  async () => {
    // Fetch from Supabase
  },
  ['catalog'],
  { revalidate: 3600 } // Cache for 1 hour
)

Image Optimization

Next.js automatically optimizes images:

Serves modern formats (WebP, AVIF)
Generates multiple sizes
Lazy loads images

Database Indexes

Ensure critical indexes are in place (already included in schema):

CREATE INDEX idx_requisiciones_fecha ON requisiciones(fecha_recepcion);
CREATE INDEX idx_requisiciones_proveedor ON requisiciones(proveedor_id);
CREATE INDEX idx_requisiciones_estatus ON requisiciones(estatus_id);
CREATE INDEX idx_requisiciones_destino ON requisiciones(destino_id);

Monitoring and Maintenance

Application Monitoring

Vercel Analytics:

Automatically tracks Core Web Vitals
Real user performance monitoring
Available in Vercel dashboard under Analytics

Custom Logging: Next.js automatically logs:

Server errors (500 pages)
Build errors
API route errors

Database Monitoring

Supabase Dashboard:

Navigate to Database → Usage
Monitor:
- Database size
- Active connections
- Query performance
- Storage usage

Set up email alerts in Supabase for database issues or approaching limits.

Health Checks

Implement health check endpoints:

app/api/health/route.ts

import { createClient } from '@/lib/supabase/server'

export async function GET() {
  try {
    const supabase = await createClient()
    const { error } = await supabase.from('profiles').select('count').limit(1)
    
    if (error) throw error
    
    return Response.json({ status: 'healthy' })
  } catch (error) {
    return Response.json({ status: 'unhealthy', error }, { status: 503 })
  }
}

Security Considerations

HTTPS Only

Ensure all traffic uses HTTPS. Vercel provides this automatically.

Row Level Security

Verify RLS policies are active on all Supabase tables.

Environment Variables

Never expose service role key in client-side code.

Regular Updates

Keep dependencies updated for security patches.

Security Headers

Add security headers in next.config.ts:

next.config.ts

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
    ]
  },
}

Continuous Deployment

Automatic Deployments

Vercel automatically deploys:

Production: On push to main branch
Preview: On pull requests

Deployment Workflow

Rollback Strategy

If issues occur after deployment:

Instant Rollback (Vercel)

Go to Deployments in Vercel dashboard
Find the previous working deployment
Click ⋯ menu → Promote to Production
Confirm rollback

Database Rollback

If database changes caused issues:

Go to Supabase Database → Backups
Select the backup before the change
Click Restore

Database rollbacks will lose data created after the backup point.

Post-Deployment Tasks

Create Admin User

Visit your production login page
Sign up with your admin email
In Supabase, manually update the user’s role:

UPDATE profiles 
SET rol = 'admin' 
WHERE id = 'user-uuid-here';

Test Core Functionality

Verify critical features:

✅ User authentication
✅ Create requisición
✅ Calendar view
✅ Edit requisición
✅ Admin user management
✅ Catalog management

Configure User Access

Set up your team:

Have team members sign up
Admin approves and assigns roles
Test role-based permissions

Monitor Performance

For the first week:

Check Vercel Analytics daily
Monitor Supabase database usage
Review error logs
Gather user feedback

Troubleshooting

Build Failures

TypeScript errors:

# Run type checking locally
npm run build

Dependency issues:

# Clear cache and reinstall
rm -rf node_modules .next
npm install
npm run build

Runtime Errors

Check Vercel logs:

Go to your project in Vercel
Navigate to Deployments → Select deployment
Click Runtime Logs

Common issues:

Missing environment variables
Incorrect Supabase credentials
Database connection timeout
RLS policy blocking access

Performance Issues

Slow page loads:

Check Supabase query performance in dashboard
Review database indexes
Verify caching is working
Check Vercel Analytics for bottlenecks

Next Steps

User Guides

Learn how to use the application by role

API Reference

Explore the API documentation

Database Schema

Database schema and maintenance

GitHub Issues

Get help and report issues

Get Started

Core Features

User Guides

Database

Deployment

​Pre-Deployment Checklist

​Deployment Options

​Vercel (Recommended)

​Alternative Platforms

Netlify

Railway

Render

Docker

​Build Configuration

​Build Command

​Build Output

​Environment-Specific Configuration

​Production vs. Development

​Node Environment

​Database Considerations

​Production Database Setup

​Backups

​Performance Optimization

​Caching Strategy

​Image Optimization

​Database Indexes

​Monitoring and Maintenance

​Application Monitoring

​Database Monitoring

​Health Checks

​Security Considerations

HTTPS Only

Row Level Security

Environment Variables

Regular Updates

​Security Headers

​Continuous Deployment

​Automatic Deployments

​Deployment Workflow

​Rollback Strategy

​Post-Deployment Tasks

​Troubleshooting

​Build Failures

​Runtime Errors

​Performance Issues

​Next Steps

User Guides

API Reference

Database Schema

GitHub Issues

Build docs developers (and LLMs) love

Pre-Deployment Checklist

Deployment Options

Vercel (Recommended)

Alternative Platforms

Build Configuration

Build Command

Build Output

Environment-Specific Configuration

Production vs. Development

Node Environment

Database Considerations

Production Database Setup

Backups

Performance Optimization

Caching Strategy

Image Optimization

Database Indexes

Monitoring and Maintenance

Application Monitoring

Database Monitoring

Health Checks

Security Considerations

Security Headers

Continuous Deployment

Automatic Deployments

Deployment Workflow

Rollback Strategy

Post-Deployment Tasks

Troubleshooting

Build Failures

Runtime Errors

Performance Issues

Next Steps