Deploying to Vercel: Production-Ready in Minutes

$# Clean previous builds
$rm -rf .next

$# Generate Prisma client
$npx prisma generate

$# Run production build
$npm run build

$# Test production server
$npm start

$# Install Vercel CLI globally
$npm install -g vercel

$# Login to Vercel
$vercel login

$# Deploy from project directory
$vercel

$# Follow the prompts
$? Set up and deploy? Yes
$? Which scope? Your Account
$? Link to existing project? No
$? What's your project's name? fabrk-app
$? In which directory is your code located? ./

$# vercel.json
${
$  "git": {
$    "deploymentEnabled": {
$      "main": true,
$      "preview": true
$    }
$  },
$  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- . ':!docs' ':!*.md' ':!.github'"
$}

$DATABASE_URL="postgresql://username:password@hostname:5432/database?sslmode=require"

$NEXTAUTH_SECRET="your-32-character-minimum-secret-key-here"

$# Using OpenSSL
$openssl rand -base64 32

$# Using Node.js
$node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

$NEXTAUTH_URL="https://yourdomain.com"

$NEXT_PUBLIC_APP_URL="https://yourdomain.com"

$GITHUB_CLIENT_ID="Iv1.abc123..."
$GITHUB_CLIENT_SECRET="abc123..."

$GOOGLE_CLIENT_ID="123456789.apps.googleusercontent.com"
$GOOGLE_CLIENT_SECRET="GOCSPX-..."

$# API Keys
$STRIPE_SECRET_KEY="sk_live_..."
$STRIPE_PUBLISHABLE_KEY="pk_live_..."

$# Webhook Secret
$STRIPE_WEBHOOK_SECRET="whsec_..."

$# Price IDs (from Stripe Dashboard → Products)
$STRIPE_PRICE_ID_PRO_MONTHLY="price_..."
$STRIPE_PRICE_ID_PRO_YEARLY="price_..."

$POLAR_API_KEY="polar_..."
$POLAR_WEBHOOK_SECRET="whsec_..."
$POLAR_ORGANIZATION_ID="org_..."

$LEMONSQUEEZY_API_KEY="..."
$LEMONSQUEEZY_WEBHOOK_SECRET="..."
$LEMONSQUEEZY_STORE_ID="..."

$RESEND_API_KEY="re_..."
$EMAIL_FROM="noreply@yourdomain.com"

// src/lib/env/index.ts
import { z } from 'zod';

const envSchema = z.object({
  DATABASE_URL: z.string().url(),
  NEXTAUTH_SECRET: z.string().min(32),
  NEXTAUTH_URL: z.string().url(),
  NEXT_PUBLIC_APP_URL: z.string().url(),

  // Optional with defaults
  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
});

export const env = envSchema.parse(process.env);

$DATABASE_URL="postgres://default:password@region.postgres.vercel-storage.com:5432/verceldb?sslmode=require"

$# Direct connection (for migrations)
$DATABASE_URL="postgresql://postgres:password@db.projectref.supabase.co:5432/postgres"

$# Pooled connection (for serverless)
$DATABASE_URL="postgresql://postgres:password@db.projectref.supabase.co:6543/postgres?pgbouncer=true"

$DATABASE_URL="postgresql://username:password@ep-cool-name-123456.us-east-1.aws.neon.tech/neondb?sslmode=require"

$# Production
$DATABASE_URL="...@ep-prod-123.neon.tech/main"

$# Preview (create branch per PR)
$DATABASE_URL="...@ep-prod-123.neon.tech/preview-pr-42"

$DATABASE_URL="postgresql://postgres:password@containers-us-west-123.railway.app:5432/railway"

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Standalone output for optimal serverless deployment
  output: 'standalone',

  // Enable React strict mode for better development
  reactStrictMode: true,

  // Experimental features
  experimental: {
    // Enable server actions
    serverActions: {
      bodySizeLimit: '2mb',
    },
    // Optimize package imports
    optimizePackageImports: ['lucide-react', '@radix-ui/react-icons'],
  },

  // Image optimization
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com',
        pathname: '/u/**',
      },
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.public.blob.vercel-storage.com',
        pathname: '/**',
      },
    ],
    formats: ['image/avif', 'image/webp'],
  },

  // Logging configuration
  logging: {
    fetches: {
      fullUrl: true,
    },
  },

  // Headers for security
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
        ],
      },
    ];
  },

  // Redirects
  async redirects() {
    return [
      {
        source: '/app',
        destination: '/dashboard',
        permanent: true,
      },
    ];
  },

  // Webpack configuration
  webpack: (config, { isServer }) => {
    // Handle Node.js native modules
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        net: false,
        tls: false,
      };
    }
    return config;
  },
};

export default nextConfig;

output: 'standalone',

$# Install analyzer
$npm install @next/bundle-analyzer

$# Add to next.config.ts
$const withBundleAnalyzer = require('@next/bundle-analyzer')({
$  enabled: process.env.ANALYZE === 'true',
$});

$module.exports = withBundleAnalyzer(nextConfig);

$# Run analysis
$ANALYZE=true npm run build

experimental: {
  optimizePackageImports: [
    'lucide-react',
    '@radix-ui/react-icons',
    '@headlessui/react',
    'date-fns',
    'lodash',
  ],
},

// Before optimization
import { Button, Card, Input } from '@/components/ui';

// After optimization (automatic)
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "prisma generate && next build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["iad1"],
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 30
    },
    "api/ai/**/*.ts": {
      "memory": 3008,
      "maxDuration": 60
    },
    "api/webhooks/**/*.ts": {
      "memory": 512,
      "maxDuration": 30
    }
  },
  "crons": [
    {
      "path": "/api/cron/daily-report",
      "schedule": "0 9 * * *"
    },
    {
      "path": "/api/cron/cleanup-sessions",
      "schedule": "0 0 * * *"
    },
    {
      "path": "/api/cron/sync-subscriptions",
      "schedule": "0 */6 * * *"
    },
    {
      "path": "/api/cron/weekly-digest",
      "schedule": "0 10 * * 1"
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-store, max-age=0"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()"
        }
      ]
    },
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/blog",
      "destination": "/blog/page/1"
    }
  ],
  "redirects": [
    {
      "source": "/docs",
      "destination": "https://docs.yourdomain.com",
      "permanent": false
    }
  ],
  "git": {
    "deploymentEnabled": {
      "main": true,
      "preview": true
    }
  },
  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- . ':!docs' ':!*.md' ':!.github'"
}

"regions": ["iad1"]

"functions": {
  "api/**/*.ts": {
    "memory": 1024,
    "maxDuration": 30
  }
}

$# Production-only
$STRIPE_SECRET_KEY="sk_live_..."  (Production only)

$# Preview-only
$STRIPE_SECRET_KEY="sk_test_..."  (Preview only)

$# Both
$RESEND_API_KEY="re_..."  (Production + Preview)

$# Create branch for PR
$neon branch create --name preview-pr-42

$# Get connection string
$neon connection-string preview-pr-42

// vercel.json
{
  "redirects": [
    {
      "source": "/:path*",
      "has": [{ "type": "host", "value": "www.yourdomain.com" }],
      "destination": "https://yourdomain.com/:path*",
      "permanent": true
    }
  ]
}

{
  "redirects": [
    {
      "source": "/:path*",
      "has": [{ "type": "host", "value": "yourdomain.com" }],
      "destination": "https://www.yourdomain.com/:path*",
      "permanent": true
    }
  ]
}

$NEXTAUTH_URL="https://yourdomain.com"
$NEXT_PUBLIC_APP_URL="https://yourdomain.com"

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { getToken } from 'next-auth/jwt';

// Routes that require authentication
const protectedRoutes = ['/dashboard', '/settings', '/api/user'];

// Routes that should redirect logged-in users
const authRoutes = ['/login', '/register'];

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Get session token
  const token = await getToken({
    req: request,
    secret: process.env.NEXTAUTH_SECRET,
  });

  // Check if route is protected
  const isProtectedRoute = protectedRoutes.some(route =>
    pathname.startsWith(route)
  );

  // Check if route is auth route
  const isAuthRoute = authRoutes.some(route =>
    pathname.startsWith(route)
  );

  // Redirect unauthenticated users from protected routes
  if (isProtectedRoute && !token) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('callbackUrl', pathname);
    return NextResponse.redirect(loginUrl);
  }

  // Redirect authenticated users from auth routes
  if (isAuthRoute && token) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  // Add security headers
  const response = NextResponse.next();
  response.headers.set('X-Frame-Options', 'SAMEORIGIN');
  response.headers.set('X-Content-Type-Options', 'nosniff');

  return response;
}

export const config = {
  matcher: [
    /*
     * Match all request paths except:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - public folder
     */
    '/((?!_next/static|_next/image|favicon.ico|public/).*)',
  ],
};

// app/api/fast-route/route.ts
import { NextResponse } from 'next/server';

export const runtime = 'edge';

export async function GET() {
  return NextResponse.json({ timestamp: Date.now() });
}

// NOT available at edge
import fs from 'fs';           // No filesystem
import { PrismaClient } from '@prisma/client';  // No Prisma (use @prisma/client/edge)
import crypto from 'crypto';   // Limited crypto

// Available at edge
import { headers, cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';
  const city = request.geo?.city || 'Unknown';
  const region = request.geo?.region || 'Unknown';

  // Redirect EU users to EU-specific page
  const euCountries = ['DE', 'FR', 'IT', 'ES', 'NL'];
  if (euCountries.includes(country)) {
    // Add GDPR banner flag
    const response = NextResponse.next();
    response.cookies.set('show-gdpr', 'true');
    return response;
  }

  return NextResponse.next();
}

{
  "functions": {
    "app/api/ai/generate/route.ts": {
      "memory": 3008,
      "maxDuration": 60
    },
    "app/api/export/route.ts": {
      "memory": 2048,
      "maxDuration": 120
    }
  }
}

// app/api/heavy-computation/route.ts

// Function configuration
export const maxDuration = 60; // seconds
export const dynamic = 'force-dynamic';

export async function POST(request: Request) {
  // Long-running computation
}

// app/api/stream/route.ts
export async function GET() {
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 10; i++) {
        const chunk = encoder.encode(`data: ${i}\n\n`);
        controller.enqueue(chunk);
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
      controller.close();
    },
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

// app/api/stripe/webhook/route.ts
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import Stripe from 'stripe';
import { env } from '@/lib/env';
import { prisma } from '@/lib/prisma';

const stripe = new Stripe(env.STRIPE_SECRET_KEY);

export async function POST(request: Request) {
  const body = await request.text();
  const headersList = await headers();
  const signature = headersList.get('stripe-signature');

  if (!signature) {
    return NextResponse.json(
      { error: 'Missing signature' },
      { status: 400 }
    );
  }

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      env.STRIPE_WEBHOOK_SECRET
    );
  } catch (error) {
    console.error('Webhook signature verification failed:', error);
    return NextResponse.json(
      { error: 'Invalid signature' },
      { status: 400 }
    );
  }

  try {
    switch (event.type) {
      case 'checkout.session.completed': {
        const session = event.data.object as Stripe.Checkout.Session;
        await handleCheckoutComplete(session);
        break;
      }
      case 'customer.subscription.updated': {
        const subscription = event.data.object as Stripe.Subscription;
        await handleSubscriptionUpdate(subscription);
        break;
      }
      case 'customer.subscription.deleted': {
        const subscription = event.data.object as Stripe.Subscription;
        await handleSubscriptionCanceled(subscription);
        break;
      }
      default:
        console.log(`Unhandled event type: ${event.type}`);
    }

    return NextResponse.json({ received: true });
  } catch (error) {
    console.error('Webhook handler error:', error);
    return NextResponse.json(
      { error: 'Webhook handler failed' },
      { status: 500 }
    );
  }
}

async function handleCheckoutComplete(session: Stripe.Checkout.Session) {
  const userId = session.metadata?.userId;
  const customerId = session.customer as string;
  const subscriptionId = session.subscription as string;

  await prisma.user.update({
    where: { id: userId },
    data: {
      stripeCustomerId: customerId,
      stripeSubscriptionId: subscriptionId,
      plan: 'PRO',
    },
  });
}

async function handleSubscriptionUpdate(subscription: Stripe.Subscription) {
  await prisma.user.updateMany({
    where: { stripeSubscriptionId: subscription.id },
    data: {
      plan: subscription.status === 'active' ? 'PRO' : 'FREE',
    },
  });
}

async function handleSubscriptionCanceled(subscription: Stripe.Subscription) {
  await prisma.user.updateMany({
    where: { stripeSubscriptionId: subscription.id },
    data: {
      plan: 'FREE',
      stripeSubscriptionId: null,
    },
  });
}

$# Install Stripe CLI
$brew install stripe/stripe-cli/stripe

$# Login
$stripe login

$# Forward webhooks to localhost
$stripe listen --forward-to localhost:3000/api/stripe/webhook

$# Trigger test events
$stripe trigger checkout.session.completed

{
  "crons": [
    {
      "path": "/api/cron/every-minute",
      "schedule": "* * * * *"
    },
    {
      "path": "/api/cron/every-hour",
      "schedule": "0 * * * *"
    },
    {
      "path": "/api/cron/daily-9am",
      "schedule": "0 9 * * *"
    },
    {
      "path": "/api/cron/weekly-monday",
      "schedule": "0 10 * * 1"
    },
    {
      "path": "/api/cron/monthly-first",
      "schedule": "0 0 1 * *"
    },
    {
      "path": "/api/cron/every-6-hours",
      "schedule": "0 */6 * * *"
    }
  ]
}

// app/api/cron/daily-report/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { sendEmail } from '@/lib/email';

// Verify cron secret to prevent unauthorized access
export async function GET(request: Request) {
  const authHeader = request.headers.get('authorization');

  // Vercel sends this header for cron requests
  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return NextResponse.json(
      { error: 'Unauthorized' },
      { status: 401 }
    );
  }

  try {
    // Get daily stats
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const [newUsers, revenue, activeUsers] = await Promise.all([
      prisma.user.count({
        where: { createdAt: { gte: today } },
      }),
      prisma.payment.aggregate({
        where: { createdAt: { gte: today } },
        _sum: { amount: true },
      }),
      prisma.session.count({
        where: { updatedAt: { gte: today } },
      }),
    ]);

    // Send report email
    await sendEmail({
      to: 'admin@yourdomain.com',
      subject: 'Daily Report',
      html: `
        <h1>Daily Report - ${today.toDateString()}</h1>
        <ul>
          <li>New Users: ${newUsers}</li>
          <li>Revenue: $${(revenue._sum.amount || 0) / 100}</li>
          <li>Active Users: ${activeUsers}</li>
        </ul>
      `,
    });

    return NextResponse.json({
      success: true,
      data: { newUsers, revenue: revenue._sum.amount, activeUsers },
    });
  } catch (error) {
    console.error('Cron job failed:', error);
    return NextResponse.json(
      { error: 'Cron job failed' },
      { status: 500 }
    );
  }
}

$npm install @vercel/analytics @vercel/speed-insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="font-mono antialiased">
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

import { track } from '@vercel/analytics';

// Track button click
<Button onClick={() => track('upgrade_clicked', { plan: 'pro' })}>
  > UPGRADE
</Button>

// Track form submission
async function handleSubmit(data: FormData) {
  await submitForm(data);
  track('form_submitted', { formId: 'contact' });
}

$npm install @sentry/nextjs
$npx @sentry/wizard@latest -i nextjs

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
});

// lib/logger.ts
type LogLevel = 'debug' | 'info' | 'warn' | 'error';

interface LogContext {
  userId?: string;
  requestId?: string;
  [key: string]: unknown;
}

function log(level: LogLevel, message: string, context?: LogContext) {
  const entry = {
    timestamp: new Date().toISOString(),
    level,
    message,
    ...context,
  };

  if (level === 'error') {
    console.error(JSON.stringify(entry));
  } else {
    console.log(JSON.stringify(entry));
  }
}

export const logger = {
  debug: (msg: string, ctx?: LogContext) => log('debug', msg, ctx),
  info: (msg: string, ctx?: LogContext) => log('info', msg, ctx),
  warn: (msg: string, ctx?: LogContext) => log('warn', msg, ctx),
  error: (msg: string, ctx?: LogContext) => log('error', msg, ctx),
};

$# Using Vercel CLI
$vercel alias set deployment-url.vercel.app yourdomain.com

$# Or in dashboard
$# Deployments → deployment → ... → Assign Custom Domain

export async function GET() {
  const data = await fetchData();

  return NextResponse.json(data, {
    headers: {
      'Cache-Control': 's-maxage=60, stale-while-revalidate=300',
    },
  });
}

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  quality={75}
  priority
  alt="Hero"
/>

// next.config.ts
export default {
  compress: true,
};

// BAD - N+1 query
const users = await prisma.user.findMany();
for (const user of users) {
  const posts = await prisma.post.findMany({ where: { userId: user.id } });
}

// GOOD - Single query with include
const users = await prisma.user.findMany({
  include: { posts: true },
});

model User {
  id    String @id @default(cuid())
  email String @unique

  @@index([createdAt])
}

$DATABASE_URL="postgresql://...?connection_limit=10&pool_timeout=20"

$git checkout -b staging
$git push -u origin staging

$# Production (main branch)
$DATABASE_URL="production-db-url"
$STRIPE_SECRET_KEY="sk_live_..."

$# Preview (staging branch)
$DATABASE_URL="staging-db-url"
$STRIPE_SECRET_KEY="sk_test_..."

// components/environment-badge.tsx
export function EnvironmentBadge() {
  const env = process.env.VERCEL_ENV;

  if (env === 'production') return null;

  return (
    <div className="fixed bottom-4 left-4 z-50">
      <Badge variant={env === 'preview' ? 'secondary' : 'outline'}>
        {env?.toUpperCase()}
      </Badge>
    </div>
  );
}

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

$# vercel.json
${
$  "ignoreCommand": "npx turbo-ignore"
$}