Frontend Deployment

Deploy SuperBox frontend to Vercel with automatic CI/CD

Vercel Deployment

SuperBox frontend is optimized for deployment on Vercel, the platform built by the creators of Next.js.

Vercel provides zero-configuration deployment, automatic HTTPS, global CDN, and instant rollbacks.

Prerequisites

1. Create Vercel Account

   Sign up at vercel.com using your GitHub account for seamless integration.

2. Install Vercel CLI (Optional)

   For local testing and deployment:

   npm install -g vercel
   
3. Prepare Environment Variables

   Ensure all required environment variables are documented and ready.

Deployment Methods

Method 1: GitHub Integration (Recommended)

Step 1: Connect Repository

1. Go to vercel.com/new
2. Select Import Git Repository
3. Choose the SuperBox-FE repository
4. Click Import

Step 2: Configure Project

Vercel auto-detects Next.js configuration. Verify settings:

Framework Preset · string · default: "Next.js"

Automatically detected

Root Directory · string · default: "./"

Keep as root unless using monorepo

Build Command · string · default: "next build"

Default Next.js build command

Output Directory · string · default: ".next"

Next.js output directory

Install Command · string · default: "npm install"

Dependency installation command

Step 3: Add Environment Variables

Add all environment variables in the Vercel dashboard:

# API
NEXT_PUBLIC_API_URL=https://api.superbox.ai

# Firebase

NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

# OAuth

NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXT_PUBLIC_GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Never include secrets in public variables.

Step 4: Deploy

Click Deploy button. Vercel will:

1. Clone your repository
2. Install dependencies
3. Run the build process
4. Deploy to global CDN
5. Provide a production URL

Deployment complete! Your app is now live at https://your-project.vercel.app

Method 2: Vercel CLI

Deploy directly from your terminal:

First Deployment
# Login to Vercel
vercel login

# Deploy to preview
vercel

# Deploy to production
vercel --prod

Method 3: Manual Deployment

Upload your built application manually:

1. Build Locally

   npm run build
   
2. Test Production Build

   npm run start
   
3. Deploy via Dashboard

   1. Go to Vercel dashboard
   2. Click Add New > Project
   3. Upload the .next folder
   4. Configure settings
   5. Deploy

Manual deployment is not recommended for production. Use GitHub integration for CI/CD benefits.

Custom Domain Setup

1. Add Domain in Vercel

   1. Go to your project settings
   2. Navigate to Domains tab
   3. Click Add Domain
   4. Enter your domain (e.g., superbox.ai)
2. Configure DNS

   Add these DNS records in your domain registrar:

   Apex Domain

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

   www Subdomain

   Type:  CNAME
   Name:  www
   Value: cname.vercel-dns.com
   TTL:   3600
   
3. Verify Domain

   Vercel automatically verifies DNS configuration and provisions SSL certificates.

   HTTPS is automatically enabled for all domains with Let’s Encrypt certificates.

4. Update Environment Variables

   Update NEXTAUTH_URL to your custom domain:

   NEXTAUTH_URL=https://superbox.ai
   

Deployment Configuration

vercel.json

Customize deployment behavior with vercel.json:

{
  "version": 2,
  "buildCommand": "npm run build",
  "framework": "nextjs",
  "regions": ["iad1", "sfo1"],
  "env": {
 "NEXT_PUBLIC_API_URL": "https://api.superbox.ai"
  },
  "headers": [
 {
"source": "/(.*)",
"headers": [
  {
 "key": "X-Frame-Options",
 "value": "DENY"
  },
  {
 "key": "X-Content-Type-Options",
 "value": "nosniff"
  },
  {
 "key": "Referrer-Policy",
 "value": "strict-origin-when-cross-origin"
  }
]
 }
  ],
  "redirects": [
 {
"source": "/docs",
"destination": "/docs/introduction",
"permanent": true
 }
  ],
  "rewrites": [
 {
"source": "/api/:path*",
"destination": "https://api.superbox.ai/:path*"
 }
  ]
}

regions · array

Deploy to specific regions for lower latency: - iad1 - Washington, D.C., USA

• sfo1 - San Francisco, USA - lhr1 - London, UK - hnd1 - Tokyo, Japan

CI/CD Pipeline

Automatic Deployments

Production

Trigger: Push to main branch Automatically deploys to production domain

Preview

Trigger: Pull requests & other branches Creates unique preview URLs for testing

Branch Configuration

# .github/workflows/vercel.yml
name: Vercel Deployment

on:
  push:
 branches: [main, develop]
  pull_request:
 branches: [main]

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
 runs-on: ubuntu-latest
 steps:
- uses: actions/checkout@v4

- name: Install Vercel CLI
  run: npm install -g vercel

- name: Deploy to Vercel
  run: |
 if [ "${{ github.ref }}" == "refs/heads/main" ]; then
vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
 else
vercel --token=${{ secrets.VERCEL_TOKEN }}
 fi

Deployment Protection

Enable deployment protection in Vercel settings:

Require Approval - Manual approval for production deployments

Protected Branches - Only main branch deploys to production

Build Checks - Block deployment if build fails

Preview Comments - Automatic PR comments with preview URLs

Performance Optimization

Next.js Configuration

Optimize your next.config.mjs for production:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable React Strict Mode
  reactStrictMode: true,

  // Optimize images
  images: {
 domains: ["api.superbox.ai", "avatars.githubusercontent.com"],
 formats: ["image/avif", "image/webp"],
 minimumCacheTTL: 60,
  },

  // Enable SWC minification
  swcMinify: true,

  // Compress output
  compress: true,

  // Experimental features
  experimental: {
 optimizePackageImports: ["framer-motion", "lucide-react"],
  },

  // Headers for security
  async headers() {
 return [
{
  source: "/(.*)",
  headers: [
 {
key: "X-DNS-Prefetch-Control",
value: "on",
 },
 {
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload",
 },
 {
key: "X-Frame-Options",
value: "SAMEORIGIN",
 },
 {
key: "X-Content-Type-Options",
value: "nosniff",
 },
  ],
},
 ];
  },
};

export default nextConfig;

Edge Functions

Use Vercel Edge Functions for ultra-low latency:

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

export async function GET() {
  return Response.json({
 status: "healthy",
 timestamp: new Date().toISOString(),
  });
}

Caching Strategy

Implement intelligent caching:

app/server/[id]/page.tsx
export const revalidate = 3600; // Revalidate every hour

export async function generateStaticParams() {
  const servers = await fetchPopularServers();

  return servers.map((server) => ({
 id: server.id,
  }));
}

Monitoring & Analytics

Vercel Analytics

Enable built-in analytics:

app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }) {
  return (
 <html>
<body>
  {children}
  <Analytics />
  <SpeedInsights />
</body>
 </html>
  );
}

Web Vitals

Monitor Core Web Vitals:

LCP

Target: < 2.5s

Largest Contentful Paint

FID

Target: < 100ms

First Input Delay

CLS

Target: < 0.1

Cumulative Layout Shift

Troubleshooting

Build Failures

Check Vercel build logs for errors:

vercel logs [deployment-url]

Common issues:

• Missing environment variables
• TypeScript errors
• Dependency issues
• Memory limit exceeded

Environment Variables Not Working

Ensure variables are:

1. Added in Vercel dashboard
2. Assigned to correct environment (Production/Preview/Development)
3. Prefixed with NEXT_PUBLIC_ if needed in browser
4. Redeployed after adding

404 Errors on Refresh

Vercel automatically handles Next.js routing. If you see 404s: 1. Verify next.config.mjs is correct 2. Check file structure matches Next.js conventions 3. Ensure dynamic routes are properly configured

Slow Performance

Optimize your deployment:

1. Enable image optimization
2. Implement code splitting
3. Use Edge Functions for API routes
4. Enable ISR (Incremental Static Regeneration)
5. Add proper caching headers

Rollback Strategy

1. View Deployments

   Go to your project dashboard and click Deployments tab

2. Select Previous Version

   Find the working deployment you want to restore

3. Promote to Production

   Click the … menu, then select Promote to Production

4. Verify

   Check that your production domain now serves the rolled-back version

Vercel keeps all deployments indefinitely, making rollbacks instantaneous with zero downtime.

Next Steps

Backend Deployment

Deploy Python backend

API Documentation

Explore API endpoints

Monitoring

Set up monitoring and alerts

Security

Review security best practices