Frontend Deployment - superbox.ai

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

Create Vercel Account

Install Vercel CLI (Optional)

For local testing and deployment:

npm install -g vercel

Prepare Environment Variables

Ensure all required environment variables are documented and ready.

Deployment Methods

Method 1: GitHub Integration (Recommended)

Step 1: Connect Repository

Go to vercel.com/new
Select Import Git Repository
Choose the SuperBox-FE repository
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:

Clone your repository
Install dependencies
Run the build process
Deploy to global CDN
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:

Build Locally

npm run build

Test Production Build

npm run start

Deploy via Dashboard

Go to Vercel dashboard
Click Add New > Project
Upload the .next folder
Configure settings
Deploy

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

Custom Domain Setup

Add Domain in Vercel

Go to your project settings
Navigate to Domains tab
Click Add Domain
Enter your domain (e.g., superbox.ai)

Configure DNS

Add these DNS records in your domain registrar:

Apex Domain
www Subdomain

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

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

Verify Domain

Vercel automatically verifies DNS configuration and provisions SSL certificates.

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

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.5sLargest Contentful Paint

FID

Target: < 100msFirst Input Delay

CLS

Target: < 0.1Cumulative 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:

Added in Vercel dashboard
Assigned to correct environment (Production/Preview/Development)
Prefixed with NEXT_PUBLIC_ if needed in browser
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:

Enable image optimization
Implement code splitting
Use Edge Functions for API routes
Enable ISR (Incremental Static Regeneration)
Add proper caching headers

Rollback Strategy

View Deployments

Go to your project dashboard and click Deployments tab

Select Previous Version

Find the working deployment you want to restore

Promote to Production

Click the … menu, then select Promote to Production

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

Getting Started

Core Concepts

Infrastructure

Backend

Frontend

REST API

Servers API

Auth API

CLI

CLI Commands

​Vercel Deployment

​Prerequisites

​Deployment Methods

​Method 1: GitHub Integration (Recommended)

​Method 2: Vercel CLI

​Method 3: Manual Deployment

​Custom Domain Setup

​Deployment Configuration

​vercel.json

​CI/CD Pipeline

​Automatic Deployments

Production

Preview

​Branch Configuration

​Deployment Protection

​Performance Optimization

​Next.js Configuration

​Edge Functions

​Caching Strategy

​Monitoring & Analytics

​Vercel Analytics

​Web Vitals

LCP

FID

CLS

​Troubleshooting

​Rollback Strategy

​Next Steps

Backend Deployment

API Documentation

Monitoring

Security

Vercel Deployment

Prerequisites

Deployment Methods

Method 1: GitHub Integration (Recommended)

Method 2: Vercel CLI

Method 3: Manual Deployment

Custom Domain Setup

Deployment Configuration

vercel.json

CI/CD Pipeline

Automatic Deployments

Branch Configuration

Deployment Protection

Performance Optimization

Next.js Configuration

Edge Functions

Caching Strategy

Monitoring & Analytics

Vercel Analytics

Web Vitals

Troubleshooting

Rollback Strategy

Next Steps