Deploying to Vercel

Deploying Next.js to Vercel

Vercel is the platform built by the creators of Next.js. It offers zero-configuration deployment, global edge network, automatic HTTPS, preview deployments for pull requests, and native support for all Next.js features including ISR and Edge Functions.

Initial Deployment

# Install Vercel CLI
npm install -g vercel

# Deploy from the project root
vercel

# Follow the prompts to link to your Vercel account and project

Or connect your GitHub repository in the Vercel dashboard for automatic deployments on every push.

Environment Variables

Set production environment variables in the Vercel dashboard under Project → Settings → Environment Variables:

DATABASE_URL        # Your production database connection string
NEXTAUTH_SECRET     # Strong random secret (use openssl rand -base64 32)
NEXTAUTH_URL        # Your production domain (https://myapp.com)
GITHUB_ID           # OAuth app credentials
GITHUB_SECRET
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET

vercel.json Configuration

{
    "buildCommand": "npx prisma migrate deploy && npm run build",
    "env": {
        "SKIP_ENV_VALIDATION": "1"
    },
    "headers": [
        {
            "source": "/(.*)",
            "headers": [
                { "key": "X-Content-Type-Options", "value": "nosniff" },
                { "key": "X-Frame-Options", "value": "DENY" },
                { "key": "X-XSS-Protection", "value": "1; mode=block" }
            ]
        }
    ]
}

Preview Deployments

Every pull request gets a unique preview URL automatically. This makes reviewing UI changes and testing new features trivial for teams.

Production Checklist

# Before deploying
npm run build         # Ensure build succeeds
npm run lint          # No linting errors
npx prisma validate   # Schema is valid

# Build output analysis
npx next build --debug   # Detailed bundle information

Edge Functions vs Serverless Functions

// Runs on the edge (faster cold start, global)
export const runtime = 'edge';

export async function GET() {
    return Response.json({ status: 'ok' });
}

// Runs as serverless function (Node.js, access to prisma)
export const runtime = 'nodejs'; // Default

export async function GET() {
    const count = await db.post.count();
    return Response.json({ count });
}

Use the edge runtime for lightweight middleware and API routes. Use the Node.js runtime for database access via Prisma.