Vercel Deployment

Learn more about Mintlify

Enter your email to receive updates about new features and product releases.

Overview
Prerequisites
Deployment Steps
Step 1: Connect GitHub Repository
Step 2: Configure Project Settings
Step 3: Add Environment Variables
Supabase Variables
Cloudflare R2 Variables
Step 4: Deploy
Build Configuration
Security Headers
Custom Domain Configuration
Step 1: Add Domain in Vercel
Step 2: Configure DNS Records
Step 3: Wait for DNS Propagation
Step 4: Enable HTTPS
Supabase OAuth Configuration
Step 1: Add Production URLs
Step 2: Configure Site URL
Step 3: Test OAuth Flow
Monitoring and Analytics
Environment-Specific Configuration
Production vs Preview Branches
Branch-Specific Environment Variables
Deployment Checklist
Continuous Deployment
Rollback Deployments
Performance Optimization
Edge Functions
Image Optimization
Build Cache
Troubleshooting
Build Failures
Environment Variable Issues
OAuth Redirect Errors
Next Steps

Overview

The NJ Rajat Mahotsav platform is optimized for deployment on Vercel with Next.js 15. This guide covers the complete deployment process including environment configuration, build settings, and domain management.

Prerequisites

Before deploying to Vercel:

GitHub repository with your code pushed
Vercel account (free tier works for most use cases)
All environment variables from Environment Setup
Supabase project configured and running
Cloudflare R2 bucket created

Deployment Steps

Step 1: Connect GitHub Repository

Click Add New… → Project

Import your GitHub repository:

https://github.com/your-username/Rajat-Mahotsav-Website

Click Import

Step 2: Configure Project Settings

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

Framework Preset: Next.js

Root Directory: ./ (leave as default)

Build Command:

npm run build

Output Directory: .next (auto-configured)

Install Command:

npm install

The project uses Next.js 15 with App Router. Vercel automatically detects this configuration from package.json and next.config.mjs.

Step 3: Add Environment Variables

Click Environment Variables section and add all required variables:

Supabase Variables

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Cloudflare R2 Variables

R2_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com
R2_ACCESS_KEY_ID=your-access-key
R2_SECRET_ACCESS_KEY=your-secret-key
R2_BUCKET_NAME=your-bucket-name
R2_BUCKET_PREFIX=uploads/

Environment Scope:Set environment variables for all environments:

✅ Production
✅ Preview
✅ Development

This ensures preview deployments and local development via Vercel CLI work correctly.

Step 4: Deploy

Click Deploy to start the build process.

Vercel will:

Clone your repository

Install dependencies (npm install)

Run the build command (npm run build)

Deploy to a production URL

Initial deployment takes 2-5 minutes.

Build Configuration

The project’s next.config.mjs includes specific configurations for production:

const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true
  },
  experimental: {
    optimizePackageImports: ['framer-motion'],
  },
}

Production Recommendations:Before going live, fix TypeScript and ESLint errors:

eslint: {
  ignoreDuringBuilds: false, // Enable linting
},
typescript: {
  ignoreBuildErrors: false, // Enable type checking
},

These are currently disabled for rapid development but should be addressed for production stability.

Security Headers

The platform automatically applies security headers to all routes via next.config.mjs:

async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'X-Frame-Options',
          value: 'DENY',
        },
        {
          key: 'X-Content-Type-Options',
          value: 'nosniff',
        },
        {
          key: 'X-XSS-Protection',
          value: '1; mode=block',
        },
        {
          key: 'Referrer-Policy',
          value: 'strict-origin-when-cross-origin',
        },
        {
          key: 'Permissions-Policy',
          value: 'camera=(), microphone=(), geolocation=()',
        },
      ],
    },
  ]
}

These headers are automatically deployed with your application. No additional configuration needed in Vercel.

Custom Domain Configuration

Step 1: Add Domain in Vercel

Go to your project in Vercel Dashboard

Navigate to Settings → Domains

Click Add and enter your domain:

njrajatmahotsav.com
www.njrajatmahotsav.com

Step 2: Configure DNS Records

Add these records in your domain registrar (e.g., Cloudflare DNS):

For apex domain (njrajatmahotsav.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain:

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

Step 3: Wait for DNS Propagation

DNS changes take 1-48 hours to propagate globally. Check status:

nslookup njrajatmahotsav.com

Step 4: Enable HTTPS

Vercel automatically provisions SSL certificates via Let’s Encrypt. This happens within minutes after DNS verification.

Cloudflare Integration:If using Cloudflare for DNS, set SSL/TLS mode to Full (not Full Strict) to avoid certificate errors during initial setup.

Supabase OAuth Configuration

Update Supabase OAuth redirect URLs for production:

Step 1: Add Production URLs

Go to Supabase Dashboard → Authentication → URL Configuration

Add to Redirect URLs:

https://njrajatmahotsav.com/auth/callback
https://www.njrajatmahotsav.com/auth/callback
https://your-project.vercel.app/auth/callback

Step 2: Configure Site URL

Set Site URL to your primary domain:

https://njrajatmahotsav.com

Step 3: Test OAuth Flow

Navigate to https://your-domain.com/admin/registrations

Click Sign in with Google

Verify successful redirect after authentication

Security Note:The admin portal restricts access by email domain (@nj.sgadi.us). Update this in lib/admin-auth.ts before deployment:

const ALLOWED_DOMAIN = "@your-organization.com"

Monitoring and Analytics

The platform includes Vercel Analytics and Speed Insights:

{
  "dependencies": {
    "@vercel/analytics": "1.3.1",
    "@vercel/speed-insights": "^1.3.1"
  }
}

These are automatically enabled in production. View metrics in:

Vercel Dashboard → Analytics
Speed Insights tab

Environment-Specific Configuration

Production vs Preview Branches

Vercel automatically creates preview deployments for:

Pull requests
Non-production branches

Production Branch: main or master Preview Branches: All other branches

Branch-Specific Environment Variables

Use different Supabase projects for preview environments:

Create a staging Supabase project
In Vercel, set environment variables with scope:
- Production: Production Supabase credentials
- Preview: Staging Supabase credentials
- Development: Local development credentials

Deployment Checklist

Before deploying to production:

Continuous Deployment

Vercel automatically deploys on every push to your repository:

git add .
git commit -m "Update feature"
git push origin main

Vercel will:

Detect the push via GitHub webhook
Start a new deployment
Run build and tests
Deploy to production (if on main branch)
Send deployment notification

Rollback Deployments

If a deployment causes issues:

Go to Vercel Dashboard → Deployments
Find the last working deployment
Click ⋯ → Promote to Production
Confirm rollback

The previous deployment becomes active immediately.

Performance Optimization

Edge Functions

API routes run on Vercel Edge Network by default. No additional configuration needed.

Image Optimization

The project uses Cloudflare Images for optimization:

// lib/cdn-assets.ts helpers
getCloudflareImage(imageId: string, variant?: string)
getCloudflareImageMobileWp(imageId: string)
getCloudflareImageBiggest(imageId: string)

Next.js image optimization is disabled (images.unoptimized: true) in favor of Cloudflare’s service.

Build Cache

Vercel automatically caches:

node_modules (between builds)
.next/cache (Next.js build cache)
Static assets

This reduces build times from 5 minutes to ~30 seconds for subsequent deployments.

Troubleshooting

Build Failures

Problem: Build fails with “Module not found” Solution:

# Verify dependencies in package.json
npm install
npm run build

Test locally before pushing.

Environment Variable Issues

Problem: “Cannot read property of undefined” in production Solution:

Go to Settings → Environment Variables
Verify all variables are set for Production scope
Re-deploy: Deployments → ⋯ → Redeploy

OAuth Redirect Errors

Problem: “redirect_uri mismatch” after Google sign-in Solution:

Add all production URLs to Supabase redirect URLs
Include both apex and www subdomains
Wait 5 minutes for Supabase cache to clear

Next Steps

After successful deployment:

Review Security Checklist
Configure Supabase Row Level Security
Set up rate limiting
Enable monitoring alerts
Configure backup strategy

Environment Setup

Security Checklist

⌘I

Build docs developers (and LLMs) love

Get started for free Talk to us

Get Started

Core Features

Architecture

Integrations

Deployment

Overview

Prerequisites

Deployment Steps

Build Configuration

Security Headers

Custom Domain Configuration

Supabase OAuth Configuration

Monitoring and Analytics

Environment-Specific Configuration

Production vs Preview Branches

Branch-Specific Environment Variables

Deployment Checklist

Continuous Deployment

Rollback Deployments

Performance Optimization

Edge Functions

Image Optimization

Build Cache

Troubleshooting

Build Failures

Environment Variable Issues

OAuth Redirect Errors

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Features

Architecture

Integrations

Deployment

​Overview

​Prerequisites

​Deployment Steps

​Build Configuration

​Security Headers

​Custom Domain Configuration

​Supabase OAuth Configuration

​Monitoring and Analytics

​Environment-Specific Configuration

​Production vs Preview Branches

​Branch-Specific Environment Variables

​Deployment Checklist

​Continuous Deployment

​Rollback Deployments

​Performance Optimization

​Edge Functions

​Image Optimization

​Build Cache

​Troubleshooting

​Build Failures

​Environment Variable Issues

​OAuth Redirect Errors

​Next Steps

Build docs developers (and LLMs) love

Overview

Prerequisites

Deployment Steps

Build Configuration

Security Headers

Custom Domain Configuration

Supabase OAuth Configuration

Monitoring and Analytics

Environment-Specific Configuration

Production vs Preview Branches

Branch-Specific Environment Variables

Deployment Checklist

Continuous Deployment

Rollback Deployments

Performance Optimization

Edge Functions

Image Optimization

Build Cache

Troubleshooting

Build Failures

Environment Variable Issues

OAuth Redirect Errors

Next Steps