Vercel Deployment

Reportr is optimized for deployment on Vercel with special configurations for serverless functions, cron jobs, and performance optimization.

Prerequisites

Vercel account (free or paid)
PostgreSQL database (Vercel Postgres, Neon, Supabase, or other provider)
GitHub/GitLab/Bitbucket repository with Reportr source code

Quick Deploy

1. Import Project

# Using Vercel CLI
npm i -g vercel
vercel

Or import via the Vercel dashboard:

Go to vercel.com/new
Import your Git repository
Select the repository containing Reportr

2. Configure Environment Variables

Add all required environment variables in the Vercel dashboard under Settings → Environment Variables. See the Environment Variables page for the complete list.

3. Deploy

Vercel will automatically:

Install dependencies (npm install)
Run Prisma client generation (npm run postinstall)
Build the Next.js application (npm run build)
Deploy to production

Vercel Configuration

vercel.json

The vercel.json file in the repository root configures Vercel-specific settings:

{
  "functions": {
    "app/api/generate-pdf/route.ts": {
      "maxDuration": 60
    }
  },
  "crons": [
    {
      "path": "/api/cron/process-cancellations",
      "schedule": "0 2 * * *"
    },
    {
      "path": "/api/cron/process-email-sequences",
      "schedule": "0 9 * * *"
    }
  ]
}

Function Configuration

PDF Generation Function (app/api/generate-pdf/route.ts)

maxDuration: 60 seconds
Reason: PDF generation can take up to 30-60 seconds for comprehensive reports with AI insights
Note: Requires Vercel Pro plan for functions longer than 10 seconds

Cron Jobs

Reportr uses Vercel Cron Jobs for automated tasks:

Process Cancellations

Path: /api/cron/process-cancellationsSchedule: 0 2 * * * (Daily at 2:00 AM UTC)Purpose: Processes subscription cancellations and updates user access based on billing cycle end datesSecurity: Requires CRON_SECRET environment variable

Process Email Sequences

Path: /api/cron/process-email-sequencesSchedule: 0 9 * * * (Daily at 9:00 AM UTC)Purpose: Sends scheduled onboarding and trial reminder emails to usersSecurity: Requires CRON_SECRET environment variable

Vercel Cron Jobs are only available on Pro and Enterprise plans. For Hobby plans, consider using external cron services like cron-job.org or EasyCron.

Securing Cron Endpoints

Cron endpoints validate requests using a shared secret:

// In your cron API route
if (request.headers.get('authorization') !== `Bearer ${process.env.CRON_SECRET}`) {
  return new Response('Unauthorized', { status: 401 });
}

Ensure you set a strong CRON_SECRET in your environment variables.

Next.js Configuration

next.config.js

Key settings optimized for Vercel deployment:

const nextConfig = {
  // Performance optimizations
  poweredByHeader: false,        // Remove X-Powered-By header
  reactStrictMode: true,          // Enable React strict mode
  swcMinify: true,                // Use SWC for minification
  compress: true,                 // Enable gzip compression
  
  // Typed routes for type-safe navigation
  experimental: {
    typedRoutes: true,
  },
  
  // Allow remote images from any HTTPS source
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },
  
  // MDX support for documentation
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
}

Build Configuration

Build Command

npm run build

This runs:

npm install - Install dependencies
prisma generate - Generate Prisma client (via postinstall hook)
next build - Build Next.js application

Output Configuration

Vercel automatically detects Next.js and configures:

Framework: Next.js
Build Command: npm run build or next build
Output Directory: .next
Install Command: npm install

Database Setup

Vercel does not include a database by default. Choose a PostgreSQL provider:

Recommended Providers

Vercel Postgres

Integrated PostgreSQL with automatic connection pooling

Neon

Serverless PostgreSQL with autoscaling and branching

Supabase

PostgreSQL with real-time features and generous free tier

Railway

Simple PostgreSQL hosting with automatic backups

Database Environment Variables

Set these in Vercel:

DATABASE_URL="postgresql://username:password@host:5432/database"
PRISMA_DATABASE_URL="postgresql://username:password@host:5432/database?pgbouncer=true"

Use PRISMA_DATABASE_URL with connection pooling (pgbouncer) for better performance in serverless environments.

See Database Deployment for detailed setup.

Performance Optimization

Edge Runtime (Optional)

For maximum performance, consider moving API routes to Edge Runtime:

// app/api/route.ts
export const runtime = 'edge';

export async function GET(request: Request) {
  // Your edge function logic
}

The Edge Runtime has limitations. Not all Node.js APIs are available. Use for lightweight API routes only.

Image Optimization

Vercel automatically optimizes images using Next.js Image Optimization:

import Image from 'next/image'

<Image 
  src="/logo.png" 
  alt="Logo" 
  width={200} 
  height={100}
  priority
/>

Caching Strategy

Implement ISR (Incremental Static Regeneration) for reports list:

// app/dashboard/reports/page.tsx
export const revalidate = 60; // Revalidate every 60 seconds

export default async function ReportsPage() {
  const reports = await getReports();
  return <ReportsList reports={reports} />;
}

Monitoring & Analytics

Vercel Analytics

Enable in the Vercel dashboard:

Go to Settings → Analytics
Enable Web Analytics
Enable Speed Insights (recommended)

Error Tracking

Vercel provides automatic error tracking:

Runtime Logs: View in Deployments → Functions
Build Logs: View in Deployments → Build Logs

Third-Party Monitoring

Consider integrating:

Sentry - Error tracking and performance monitoring
LogRocket - Session replay and debugging
PostHog - Product analytics and feature flags

Deployment Workflow

Automatic Deployments

Vercel automatically deploys:

Production: Commits to main or master branch
Preview: Pull requests and other branches

Preview Deployments

Every pull request gets a unique preview URL:

https://reportr-git-feature-branch-yourteam.vercel.app

Preview deployments are useful for:

Testing features before merging
Sharing work with stakeholders
Running E2E tests

Custom Domains

Go to Settings → Domains
Add your custom domain
Configure DNS records as instructed
Vercel automatically provisions SSL certificates

Environment-Specific Variables

Set different values for production and preview:

# Production only
NEXTAUTH_URL="https://reportr.agency"

# Preview only
NEXTAUTH_URL="https://preview.reportr.agency"

Use the Environment dropdown when adding variables in Vercel dashboard.

Troubleshooting

Build Failures

Prisma generation fails

Solution: Ensure DATABASE_URL is set in environment variables and accessible during build.Add to package.json:

{
  "scripts": {
    "postinstall": "prisma generate"
  }
}

TypeScript errors

Solution: Run npm run build locally first to catch type errors before deploying.

npm run build
npm run lint

Environment variables not found

Solution: Ensure all required variables are set in Vercel dashboard and redeploy.Check with:

vercel env ls

Runtime Errors

Database connection timeout

Solution: Use connection pooling with PRISMA_DATABASE_URL.

PRISMA_DATABASE_URL="postgresql://...?pgbouncer=true&connection_limit=1"

Function timeout

Solution: Increase maxDuration in vercel.json for slow endpoints.Requires Vercel Pro plan for > 10 seconds.

API rate limits

Solution: Implement caching and rate limiting in your API routes.Use Vercel Edge Config or Upstash Redis for distributed rate limiting.

Security Best Practices

Set secure headers

Configure in next.config.js:

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

Use environment variables for secrets

Never commit secrets to Git. Use Vercel environment variables for:

API keys
Database credentials
OAuth secrets

Enable Vercel Authentication

Protect preview deployments:

Go to Settings → Deployment Protection
Enable Vercel Authentication

Rotate secrets regularly

Update sensitive credentials periodically:

vercel env rm NEXTAUTH_SECRET production
vercel env add NEXTAUTH_SECRET production

Getting Started

Architecture

Core Systems

Deployment

​Vercel Deployment

​Prerequisites

​Quick Deploy

​1. Import Project

​2. Configure Environment Variables

​3. Deploy

​Vercel Configuration

​vercel.json

​Function Configuration

​Cron Jobs

​Securing Cron Endpoints

​Next.js Configuration

​next.config.js

​Build Configuration

​Build Command

​Output Configuration

​Database Setup

​Recommended Providers

Vercel Postgres

Neon

Supabase

Railway

​Database Environment Variables

​Performance Optimization

​Edge Runtime (Optional)

​Image Optimization

​Caching Strategy

​Monitoring & Analytics

​Vercel Analytics

​Error Tracking

​Third-Party Monitoring

​Deployment Workflow

​Automatic Deployments

​Preview Deployments

​Custom Domains

​Environment-Specific Variables

​Troubleshooting

​Build Failures

​Runtime Errors

​Security Best Practices

​Cost Optimization

​Vercel Pricing

​Reducing Costs

​Next Steps

Database Setup

Environment Variables

Build docs developers (and LLMs) love

Vercel Deployment

Prerequisites

Quick Deploy

1. Import Project

2. Configure Environment Variables

3. Deploy

Vercel Configuration

vercel.json

Function Configuration

Cron Jobs

Securing Cron Endpoints

Next.js Configuration

next.config.js

Build Configuration

Build Command

Output Configuration

Database Setup

Recommended Providers

Database Environment Variables

Performance Optimization

Edge Runtime (Optional)

Image Optimization

Caching Strategy

Monitoring & Analytics

Vercel Analytics

Error Tracking

Third-Party Monitoring

Deployment Workflow

Automatic Deployments

Preview Deployments

Custom Domains

Environment-Specific Variables

Troubleshooting

Build Failures

Runtime Errors

Security Best Practices

Cost Optimization

Vercel Pricing

Reducing Costs

Next Steps