Deploying to Vercel

Vercel provides a streamlined deployment experience for Next.js applications. This guide covers deploying Noteverse to Vercel with proper configuration for real-time features.

Prerequisites

Before deploying to Vercel:

GitHub, GitLab, or Bitbucket repository
Vercel account (free tier available)
PostgreSQL database (Vercel Postgres, Supabase, or external)

Quick Start

Connect Repository

Import your Noteverse repository to Vercel:

Go to Vercel Dashboard
Click “Add New” → “Project”
Select your Git provider and repository
Click “Import”

Configure Build Settings

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

Framework Preset: Next.js
Build Command: vercel-build (uses custom script)
Output Directory: .next (default)
Install Command: npm install

Set Environment Variables

Add all required environment variables (see below)

Deploy

Click “Deploy” and wait for the build to complete

Environment Variables

Configure these environment variables in your Vercel project settings:

Database Configuration

DATABASE_URL="postgresql://user:password@host:5432/noteverse?sslmode=require"

If using Vercel Postgres, the DATABASE_URL is automatically configured. For external databases, ensure SSL mode is enabled.

Authentication

NEXTAUTH_URL="https://your-project.vercel.app"
NEXTAUTH_SECRET="your-generated-secret"

Generate a secure NEXTAUTH_SECRET using:

openssl rand -base64 32

Never use the same secret across environments.

Application URLs

NEXT_PUBLIC_API_URL="https://your-project.vercel.app"
NEXT_PUBLIC_SOCKET_URL="https://your-project.vercel.app"
NEXT_PUBLIC_UPLOAD_URL="https://your-blob-storage.vercel-storage.com"

Complete Environment Setup

# Database
DATABASE_URL="postgresql://user:password@host:5432/noteverse?sslmode=require"

# Authentication
NEXTAUTH_URL="https://noteverse.vercel.app"
NEXTAUTH_SECRET="your-production-secret"

# Application
NEXT_PUBLIC_API_URL="https://noteverse.vercel.app"
NEXT_PUBLIC_SOCKET_URL="https://noteverse.vercel.app"
NEXT_PUBLIC_UPLOAD_URL="https://blob-storage.vercel-storage.com"
NODE_ENV="production"

Build Script Configuration

Noteverse uses a custom vercel-build script defined in package.json:

{
  "scripts": {
    "vercel-build": "prisma generate && prisma migrate deploy && next build",
    "postinstall": "prisma generate"
  }
}

This script:

Generates Prisma Client: Creates type-safe database client
Deploys Migrations: Applies database schema changes
Builds Next.js: Creates production-optimized bundle

The vercel-build script runs automatically during Vercel deployment. You don’t need to configure it manually.

Vercel Blob Storage

Noteverse includes @vercel/blob for file uploads and storage.

Enable Vercel Blob

Add Blob Store

In your Vercel project:

Go to “Storage” tab
Click “Create Database”
Select “Blob”
Follow the setup wizard

Environment Variables Auto-Configuration

Vercel automatically adds these variables:

BLOB_READ_WRITE_TOKEN="vercel_blob_..."

Configure Upload URL

Set your public upload URL:

NEXT_PUBLIC_UPLOAD_URL="https://your-blob.public.blob.vercel-storage.com"

Usage Example

import { put } from '@vercel/blob';

export async function uploadFile(file: File) {
  const blob = await put(file.name, file, {
    access: 'public',
    token: process.env.BLOB_READ_WRITE_TOKEN,
  });
  
  return blob.url;
}

WebSocket Considerations

Vercel’s serverless architecture has limitations for WebSocket connections used by Socket.IO.

Important Limitations

Noteverse uses a custom server (server.mjs) with Socket.IO for real-time collaboration:

import { createServer } from 'node:http'
import { Server } from 'socket.io'

const httpServer = createServer(handler)
const io = new Server(httpServer)

Vercel Serverless Functions:

Maximum execution time: 10-60 seconds (plan dependent)
Not suitable for persistent WebSocket connections
Socket.IO requires long-lived connections

Solutions for Real-time Features

# Deploy the Socket.IO server separately
# Host on: Railway, Render, or Heroku

# Update environment variable
NEXT_PUBLIC_SOCKET_URL="https://noteverse-ws.railway.app"

Recommended Approach

For production deployments with real-time features:

Deploy Next.js app to Vercel (static + API routes)
Deploy Socket.IO server separately to Railway/Render
Configure CORS for cross-origin WebSocket connections
Set NEXT_PUBLIC_SOCKET_URL to separate WebSocket server

Database Setup

Using Vercel Postgres

Create Database

Go to “Storage” tab in your Vercel project
Click “Create Database” → “Postgres”
Choose region and plan

Connect to Project

Vercel automatically configures DATABASE_URL and other connection variables

Run Migrations

Migrations run automatically via vercel-build script on each deployment

Using External Database

For external PostgreSQL (Supabase, Railway, etc.):

DATABASE_URL="postgresql://user:password@host:5432/database?sslmode=require&pgbouncer=true"

Add pgbouncer=true if your database uses connection pooling (common with Supabase).

Deployment Workflow

Automatic Deployments

Vercel automatically deploys on:

Production: Pushes to main or master branch
Preview: Pull requests and other branches

Manual Deployment

Deploy manually using Vercel CLI:

Install Vercel CLI

npm i -g vercel

vercel login

Deploy

# Deploy to preview
vercel

# Deploy to production
vercel --prod

Monitoring and Logs

View Deployment Logs

Go to your project dashboard
Click on the deployment
View “Build Logs” and “Function Logs”

Common Issues

Error: Migration failed to apply

Solution:
1. Check DATABASE_URL is correct
2. Ensure database is accessible
3. Verify SSL mode configuration

Custom Domain

Add Domain

Go to project “Settings” → “Domains”
Enter your domain name
Follow DNS configuration instructions

Update Environment Variables

Update URLs to use custom domain:

NEXTAUTH_URL="https://noteverse.com"
NEXT_PUBLIC_API_URL="https://noteverse.com"

SSL Certificate

Vercel automatically provisions SSL certificates via Let’s Encrypt

Performance Optimization

Edge Functions

Consider using Edge Functions for API routes:

// app/api/notes/route.ts
export const runtime = 'edge'

export async function GET() {
  // Fast, globally distributed responses
}

Image Optimization

Vercel automatically optimizes images via next/image:

import Image from 'next/image'

<Image
  src="/note-image.png"
  alt="Note"
  width={800}
  height={600}
  priority
/>

Next Steps

Configure custom domain
Set up monitoring with Vercel Analytics
Enable preview deployments for testing
Deploy WebSocket server separately for real-time features

Docker Deployment

For full WebSocket support, consider deploying with Docker

Get Started

Core Features

User Guide

Configuration

Deployment

Deploying to Vercel

Prerequisites

Quick Start

Environment Variables

Database Configuration

Authentication

Application URLs

Complete Environment Setup

Build Script Configuration

Vercel Blob Storage

Enable Vercel Blob

Usage Example

WebSocket Considerations

Important Limitations

Solutions for Real-time Features

Recommended Approach

Database Setup

Using Vercel Postgres

Using External Database

Deployment Workflow

Automatic Deployments

Manual Deployment

Monitoring and Logs

View Deployment Logs

Common Issues

Custom Domain

Performance Optimization

Edge Functions

Image Optimization

Next Steps

Docker Deployment

Build docs developers (and LLMs) love

Get Started

Core Features

User Guide

Configuration

Deployment

​Prerequisites

​Quick Start

​Environment Variables

​Database Configuration

​Authentication

​Application URLs

​Complete Environment Setup

​Build Script Configuration

​Vercel Blob Storage

​Enable Vercel Blob

​Usage Example

​WebSocket Considerations

​Important Limitations

​Solutions for Real-time Features

​Recommended Approach

​Database Setup

​Using Vercel Postgres

​Using External Database

​Deployment Workflow

​Automatic Deployments

​Manual Deployment

​Monitoring and Logs

​View Deployment Logs

​Common Issues

​Custom Domain

​Performance Optimization

​Edge Functions

​Image Optimization

​Next Steps

Docker Deployment

Build docs developers (and LLMs) love

Prerequisites

Quick Start

Environment Variables

Database Configuration

Authentication

Application URLs

Complete Environment Setup

Build Script Configuration

Vercel Blob Storage

Enable Vercel Blob

Usage Example

WebSocket Considerations

Important Limitations

Solutions for Real-time Features

Recommended Approach

Database Setup

Using Vercel Postgres

Using External Database

Deployment Workflow

Automatic Deployments

Manual Deployment

Monitoring and Logs

View Deployment Logs

Common Issues

Custom Domain

Performance Optimization

Edge Functions

Image Optimization

Next Steps