Vercel Deployment - Galey Cloud

This guide covers deploying your Galey Cloud application to Vercel, including configuring Vercel Blob for photo storage.

Prerequisites

Before deploying to Vercel, ensure you have:

Completed Supabase Setup
Your Supabase API keys ready
Source code in a GitHub repository
Gathered all environment variables

Connecting Your Repository

Go to vercel.com and sign in with GitHub

Import project

Click “Add New…” → “Project”
Select your GitHub repository from the list
If not listed, click “Adjust GitHub App Permissions” to grant access

Configure project

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

Framework Preset: Next.js
Root Directory: ./ (or adjust if your app is in a subdirectory)
Build Command: next build (auto-detected)
Output Directory: .next (auto-detected)
Install Command: npm install (or pnpm install if using pnpm)

Configuring Build Settings

Galey Cloud’s next.config.mjs includes specific configuration:

next.config.mjs

const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig

ignoreBuildErrors: true is enabled. For production, fix TypeScript errors and remove this flag to catch type issues during build.

unoptimized: true disables Next.js image optimization. This is set because images are stored in Vercel Blob and served via CDN. If you need image optimization, consider using Next.js Image Optimization API or a third-party service.

Adjusting Build Settings (Optional)

If you need to customize build settings:

In your Vercel project dashboard, go to Settings → General
Scroll to Build & Development Settings
Adjust as needed:
- Framework Preset: Next.js
- Build Command: next build
- Output Directory: .next
- Install Command: Use default or specify pnpm install

Setting Up Vercel Blob Storage

Galey Cloud uses Vercel Blob to store uploaded photos.

Enable Blob storage

In your Vercel project dashboard, go to Storage
Click “Create Database” or “Connect Store”
Select “Blob”
Choose a store name (e.g., “galey-photos”)
Click “Create”

Connect to project

After creation, click “Connect to Project”
Select your Galey Cloud project
Vercel will automatically add the required environment variables:
- BLOB_READ_WRITE_TOKEN

The environment variable will be available to your project immediately.

Verify integration

Go to Settings → Environment Variables
Confirm BLOB_READ_WRITE_TOKEN is present
This token is automatically used by @vercel/blob package

How Blob Storage Works

Galey Cloud uses Vercel Blob in two API routes: Upload Photos (app/api/photos/upload/route.ts):

import { put } from '@vercel/blob'

const blob = await put(`photos/${user.id}/${Date.now()}-${file.name}`, file, {
  access: 'public',
})
// Returns: { url: 'https://xxx.public.blob.vercel-storage.com/...' }

Delete Photos (app/api/photos/delete/route.ts):

import { del } from '@vercel/blob'

await del(photo.blob_url)

Photos are stored with access: 'public', meaning URLs are publicly accessible without authentication. The blob URL is stored in Supabase, and RLS policies ensure users can only access their own photo metadata.

Environment Variables Setup

Navigate to environment variables

In your Vercel project dashboard, go to Settings → Environment Variables

Add Supabase variables

Add the following variables from your Supabase project:

Variable Name	Value	Environment
`NEXT_PUBLIC_SUPABASE_URL`	Your Supabase project URL	Production, Preview, Development
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Your Supabase anon key	Production, Preview, Development

Select all three environments (Production, Preview, Development) to ensure the variables are available in all deployment contexts.

Add development redirect URL (optional)

If you need a custom redirect URL for development:

Variable Name	Value	Environment
`NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL`	`http://localhost:3000/auth/callback`	Development only

Verify Blob token

Confirm BLOB_READ_WRITE_TOKEN is already set (added automatically when you connected Blob storage)

Never commit environment variables to your repository. Always configure them through Vercel’s dashboard.

For a complete list of all environment variables, see Environment Variables.

Deploy Your Application

Trigger deployment

Click “Deploy” to start your first deploymentVercel will:

Clone your repository
Install dependencies
Run next build
Deploy to the edge network

Monitor build

Watch the build logs in real-time. The deployment typically takes 1-3 minutes.Common build output:

[12:34:56.789] Cloning github.com/your-username/galey-cloud
[12:34:58.123] Installing dependencies...
[12:35:15.456] Running "next build"...
[12:35:45.789] Creating an optimized production build...
[12:36:12.345] Build completed
[12:36:15.678] Deploying...
[12:36:20.123] Deployment ready

Access your deployment

Once deployed, Vercel provides:

Production URL: https://your-app.vercel.app
Deployment URL: Unique URL for this specific deployment

Click the URL to visit your live application!

Domain Configuration

Customize your deployment with a custom domain:

Add domain

Go to Settings → Domains
Enter your custom domain (e.g., galey.example.com)
Click “Add”

Configure DNS

Vercel will provide DNS records to add to your domain registrar:For apex domains (example.com):

A     @     76.76.21.21

For subdomains (galey.example.com):

CNAME galey cname.vercel-dns.com

Update Supabase redirect URLs

After adding your custom domain:

Go to your Supabase project → Authentication → URL Configuration

Add your custom domain to Redirect URLs:

https://galey.example.com/auth/callback

Update Site URL to your custom domain

Verify SSL certificate

Vercel automatically provisions an SSL certificate. Wait a few minutes, then verify:

Visit https://galey.example.com
Check for the lock icon in your browser

Automatic Deployments

Vercel automatically deploys:

Production: Every push to your main or master branch
Preview: Every push to other branches and pull requests

Deployment Workflow

Git Push → Vercel Detects Change → Build → Deploy → Live

Preview deployments are perfect for testing changes before merging to production. Each PR gets its own unique URL.

Disabling Auto-Deploy (Optional)

To require manual deployments:

Go to Settings → Git
Under Deploy Hooks, you can configure when deployments trigger
Disable “Auto-deploy” for specific branches if needed

Monitoring and Logs

Real-time Logs

Access runtime logs

Go to your project dashboard
Click “Runtime Logs” in the top navigation
View real-time logs from your application

Filter logs

Filter by deployment
Search for specific messages
View errors and warnings

Analytics

Galey Cloud includes Vercel Analytics via @vercel/analytics/next (app/layout.tsx:3):

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

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Enable Analytics

Go to your project dashboard → Analytics
Analytics are automatically enabled for all Vercel projects
View page views, unique visitors, and performance metrics

View insights

Audience: Visitor demographics and devices
Traffic: Page views over time
Top pages: Most visited routes
Referrers: Traffic sources

Error Tracking

Monitor API route errors:

Check Runtime Logs for server-side errors
Use browser DevTools console for client-side errors
Consider integrating Sentry for advanced error tracking:
```
npm install @sentry/nextjs
```

Deployment Best Practices

Testing Before Deployment

Local build test

Always test the production build locally:

npm run build
npm run start

Fix TypeScript errors

Before production, fix all TypeScript errors and remove ignoreBuildErrors: true from next.config.mjs

Use preview deployments

Test changes in preview deployments before merging to main branch

Environment Management

Use Development environment variables for local development
Use Preview for staging/testing branches
Use Production only for the main branch

Performance Optimization

Monitor Web Vitals in Vercel Analytics
Optimize large images before uploading
Use Vercel Edge Network for global performance
Consider enabling Vercel Edge Functions for latency-sensitive routes

Troubleshooting

Build fails with “Missing environment variables”

Verify all required environment variables are set in Settings → Environment Variables
Ensure variables are enabled for the correct environment (Production/Preview/Development)
Redeploy after adding variables

”Invalid Supabase credentials” errors

Double-check NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
Ensure there are no extra spaces or quotes
Verify Supabase project is active

Photo uploads fail

Check that Vercel Blob is connected and BLOB_READ_WRITE_TOKEN is set
Monitor Runtime Logs for upload errors
Verify file size limits (Vercel Blob free tier: 100MB per file)

Authentication redirects fail

Update Supabase Redirect URLs to include your Vercel domain
Check Site URL in Supabase matches your deployment URL
Ensure cookies are enabled

Next Steps

Environment Variables

Reference for all environment variables

Deployment Overview

Return to deployment overview

Setup

​Prerequisites

​Connecting Your Repository

​Configuring Build Settings

​Adjusting Build Settings (Optional)

​Setting Up Vercel Blob Storage

​How Blob Storage Works

​Environment Variables Setup

​Deploy Your Application

​Domain Configuration

​Automatic Deployments

​Deployment Workflow

​Disabling Auto-Deploy (Optional)

​Monitoring and Logs

​Real-time Logs

​Analytics

​Error Tracking

​Deployment Best Practices

​Testing Before Deployment

​Environment Management

​Performance Optimization

​Troubleshooting

​Build fails with “Missing environment variables”

​”Invalid Supabase credentials” errors

​Photo uploads fail

​Authentication redirects fail

​Next Steps

Environment Variables

Deployment Overview

Build docs developers (and LLMs) love

Prerequisites

Connecting Your Repository

Configuring Build Settings

Adjusting Build Settings (Optional)

Setting Up Vercel Blob Storage

How Blob Storage Works

Environment Variables Setup

Deploy Your Application

Domain Configuration

Automatic Deployments

Deployment Workflow

Disabling Auto-Deploy (Optional)

Monitoring and Logs

Real-time Logs

Analytics

Error Tracking

Deployment Best Practices

Testing Before Deployment

Environment Management

Performance Optimization

Troubleshooting

Build fails with “Missing environment variables”

”Invalid Supabase credentials” errors

Photo uploads fail

Authentication redirects fail

Next Steps