Vercel Deployment - Studley AI

Overview

Studley AI is optimized for deployment on Vercel, with built-in support for Vercel Blob storage, Analytics, and serverless functions.

Prerequisites

Vercel Account

Git Repository

Push your code to:

GitHub
GitLab
Bitbucket

Environment Variables Ready

Have all environment variables prepared

Quick Deploy

Import Project

Go to Vercel Dashboard
Click “Add New…” → “Project”
Import your Git repository
Vercel will auto-detect Next.js configuration

Configure Build Settings

Vercel should auto-detect:

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

Leave these at defaults unless you have custom requirements.

Add Environment Variables

In the “Environment Variables” section, add:

# Database
DATABASE_URL=postgresql://...
SUPABASE_POSTGRES_URL=postgresql://...

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJI...

# AI
GROQ_API_KEY=gsk_xxxxxxxxxxxxx

# Security
SESSION_SECRET=your-production-secret

# App URL (will be auto-set after first deploy)
NEXT_PUBLIC_APP_URL=https://your-domain.vercel.app

Use Vercel’s “Paste Environment Variables” feature to add multiple at once

Deploy

Click “Deploy” and wait for the build to complete (typically 2-3 minutes).

Configuration Details

Next.js Config

Studley AI uses the following Next.js configuration (next.config.mjs):

next.config.mjs

const nextConfig = {
  // Force unique build ID to bypass cache
  generateBuildId: async () => {
    return `${Date.now()}-${Math.random()}`
  },
  
  // TypeScript config
  typescript: {
    ignoreBuildErrors: true,
  },
  
  // Server Actions config
  experimental: {
    serverActions: {
      bodySizeLimit: '25mb', // For file uploads
    },
  },
  
  // Image optimization
  images: {
    unoptimized: false,
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.public.blob.vercel-storage.com',
      },
      // ... other patterns
    ],
  },
}

Build Optimization

Cache Configuration

The app disables Next.js cache for fresh builds:

cacheMaxMemorySize: 0,
generateBuildId: async () => `${Date.now()}-${Math.random()}`

This ensures each deployment uses the latest code without stale cache issues.

Turbopack (Development)

Turbopack is configured for faster local development:

turbopack: {
  root: '.',
  resolveExtensions: ['.tsx', '.ts', '.jsx', '.js'],
}

Server Actions

Body size limit is increased to 25MB for file uploads:

experimental: {
  serverActions: {
    bodySizeLimit: '25mb',
  },
}

Vercel-Specific Features

Analytics

Studley AI includes Vercel Analytics:

import { Analytics } from '@vercel/analytics/react'

// Already integrated in app layout
<Analytics />

Enable in Vercel Dashboard:

Go to your project
Settings → Analytics
Enable “Vercel Analytics”

Vercel Blob Storage

Create Blob Store

Go to your Vercel project
Navigate to Storage tab
Click “Create Database” → “Blob”
Name it studley-uploads

Connect to Project

Click “Connect to Project”
Select your Studley AI project
Vercel automatically adds BLOB_READ_WRITE_TOKEN to environment variables

Verify Setup

The upload API route uses Vercel Blob:

app/api/upload/route.ts

import { put } from "@vercel/blob"

export async function POST(request: NextRequest) {
  const formData = await request.formData()
  const file = formData.get("file") as File
  
  const blob = await put(file.name, buffer, {
    access: "public",
  })
  
  return NextResponse.json({ url: blob.url })
}

Environment Variables by Environment

Production
Preview
Development

Set production-only variables:

NEXT_PUBLIC_APP_URL=https://studley.ai
SESSION_SECRET=<strong-production-secret>
NODE_ENV=production

Select “Production” environment when adding.

Preview deployments (branches, PRs) can use different settings:

NEXT_PUBLIC_APP_URL=https://studley-git-branch.vercel.app
# Can use same database or separate staging DB

Select “Preview” environment when adding.

Local development uses .env.local:

NEXT_PUBLIC_APP_URL=http://localhost:3000
# Use local or development database

Custom Domain

Add Domain

Go to Project Settings → Domains
Enter your domain (e.g., studley.ai)
Click “Add”

Configure DNS

Add these records to your DNS provider:

# For apex domain (studley.ai)
A Record: @ → 76.76.21.21

# For www subdomain
CNAME: www → cname.vercel-dns.com

Update Environment Variables

Update NEXT_PUBLIC_APP_URL to your custom domain:

NEXT_PUBLIC_APP_URL=https://studley.ai

Redeploy

Trigger a new deployment for changes to take effect:

git commit --allow-empty -m "Update domain"
git push

Build Scripts

Package.json scripts optimized for Vercel:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  }
}

Build: Runs automatically on deploy
Start: Used for production server
Lint: Optional pre-build check

Deployment Workflow

Automatic Deployments

# Push to main branch
git checkout main
git add .
git commit -m "Update feature"
git push origin main

# Vercel automatically deploys to production
# URL: https://your-domain.vercel.app

Manual Deploy

Deploy from CLI:

# Install Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy to preview
vercel

# Deploy to production
vercel --prod

Performance Optimization

Image Optimization

Next.js Image component is configured for optimal performance:

// Already configured in next.config.mjs
images: {
  formats: ['image/avif', 'image/webp'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
}

Caching Headers

Static assets are cached aggressively:

async headers() {
  return [
    {
      source: '/:path*(.png|.jpg|.jpeg|.gif|.webp|.ico)',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        },
      ],
    },
  ]
}

Monitoring and Logs

View Deployment Logs

Go to Vercel Dashboard
Select your project
Click on a deployment
View Build Logs or Function Logs

Runtime Logs

Vercel Dashboard
Vercel CLI

Real-time logs available in:

Project → Deployments
Click deployment
Go to “Functions” tab
Click on any function to see logs

Stream logs from terminal:

# Production logs
vercel logs --prod

# Follow logs in real-time
vercel logs --prod --follow

Troubleshooting

Build fails with module errors

Error: Cannot find module '@/lib/...'Solutions:

Verify tsconfig.json has correct path mappings
Check for case-sensitive file name issues
Clear build cache: redeploy from scratch

Environment variables not found

Error: process.env.GROQ_API_KEY is undefinedSolutions:

Verify variables are added in Vercel Dashboard
Check variable names match exactly (case-sensitive)
Ensure variables are set for correct environment (Production/Preview)
Redeploy after adding new variables

Database connection timeout

Error: Connection timeout in function logsSolutions:

Use connection pooling (already configured)
Verify DATABASE_URL is correct
Check database allows connections from Vercel IPs
For Supabase: Enable connection pooling in Supabase settings

413 Payload Too Large

Error: File upload fails with 413Solution: Already configured to 25MB:

experimental: {
  serverActions: {
    bodySizeLimit: '25mb',
  },
}

If still failing, check Vercel plan limits.

Build exceeds time limit

Error: Build timeout (10 minutes on Hobby plan)Solutions:

Optimize dependencies: remove unused packages
Use npm ci instead of npm install
Consider upgrading Vercel plan for faster builds

Vercel Plan Comparison

Hobby (Free)
Pro ($20/month)
Enterprise

Limits:

100GB bandwidth/month
6,000 build minutes/month
100GB storage
Serverless function: 10 second timeout

Best for: Development, small projects, testing

Next Steps

File Storage Setup

Configure Vercel Blob for uploads

Environment Variables

Configure all required variables

Custom Domain

Add your own domain

Database Setup

Set up and migrate your database

Setup

Configuration

​Overview

​Prerequisites

​Quick Deploy

​Configuration Details

​Next.js Config

​Build Optimization

​Vercel-Specific Features

​Analytics

​Vercel Blob Storage

​Environment Variables by Environment

​Custom Domain

​Build Scripts

​Deployment Workflow

​Automatic Deployments

​Manual Deploy

​Performance Optimization

​Image Optimization

​Caching Headers

​Monitoring and Logs

​View Deployment Logs

​Runtime Logs

​Troubleshooting

​Vercel Plan Comparison

​Next Steps

File Storage Setup

Environment Variables

Custom Domain

Database Setup

Build docs developers (and LLMs) love

Overview

Prerequisites

Quick Deploy

Configuration Details

Next.js Config

Build Optimization

Vercel-Specific Features

Analytics

Vercel Blob Storage

Environment Variables by Environment

Custom Domain

Build Scripts

Deployment Workflow

Automatic Deployments

Manual Deploy

Performance Optimization

Image Optimization

Caching Headers

Monitoring and Logs

View Deployment Logs

Runtime Logs

Troubleshooting

Vercel Plan Comparison

Next Steps