Deployment

Deploy your app to production

Deployment

Deploy your Next.js app to production with these platforms.

Vercel (Recommended)

The easiest way to deploy Next.js apps.

Setup

Push your code to GitHub
Go to vercel.com
Click "New Project"
Import your repository
Configure build settings (auto-detected)
Add environment variables
Click "Deploy"

Build Settings

Vercel auto-detects Next.js settings:

Build Command: pnpm run build
Output Directory: .next
Install Command: pnpm install

Environment Variables

Add these in Vercel dashboard:

DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=...
NEXTAUTH_URL=https://yourapp.vercel.app
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_PUBLIC_KEY=pk_live_...

Custom Domain

Go to Project Settings → Domains
Add your domain
Update DNS records at your registrar
Wait for SSL certificate

Deployment Workflow

# Automatic deployment
git push origin main

# Preview deployment
git push origin feature-branch

Docker Compose

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=${DATABASE_URL}
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
    depends_on:
      - db

  db:
    image: postgres:15
    environment:
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Self-Hosted (VPS)

Deploy to your own server.

Prerequisites

Ubuntu 22.04 LTS
Node.js 20+
Nginx
PM2

Setup

# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install pnpm
npm install -g pnpm

# Install PM2
npm install -g pm2

# Clone repository
git clone https://github.com/yourusername/yourapp.git
cd yourapp

# Install dependencies
pnpm install

# Build
pnpm run build

# Start with PM2
pm2 start npm --name "myapp" -- start
pm2 save
pm2 startup

Nginx Configuration

server {
    listen 80;
    server_name yourapp.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

SSL with Let's Encrypt

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourapp.com

Pre-Deployment Checklist

Environment Variables

Production environment variables:

# App
NODE_ENV=production
NEXT_PUBLIC_URL=https://yourapp.com

# Database
DATABASE_URL=postgresql://user:pass@host:5432/db

# Auth
NEXTAUTH_SECRET=your-secret-min-32-chars
NEXTAUTH_URL=https://yourapp.com

# OAuth
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...

# Stripe
STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Email
RESEND_API_KEY=re_...

# Analytics (optional)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-...

Database Migration

Run migrations on deployment:

# On Vercel (vercel.json)
{
  "buildCommand": "pnpm prisma migrate deploy && pnpm run build"
}

# Manual
pnpm prisma migrate deploy

Monitoring

Vercel Analytics

Already included with @vercel/analytics.

Error Tracking with Sentry

pnpm add @sentry/nextjs

Configure in sentry.client.config.ts and sentry.server.config.ts.

Uptime Monitoring

Use services like:

Performance

Enable Compression

Next.js compresses automatically on Vercel.

For self-hosted:

gzip on;
gzip_types text/plain text/css application/json application/javascript;

CDN

Use Vercel's CDN or Cloudflare.

Image Optimization

Next.js Image component handles optimization automatically.

Backup Strategy

Database Backups

# Automated daily backups
pg_dump $DATABASE_URL > backup-$(date +%Y%m%d).sql

File Backups

Store user uploads in S3 or similar object storage.

Rolling Back

Vercel

Go to Deployments → Previous deployment → Promote to Production

Self-Hosted

git checkout previous-commit
pnpm install
pnpm run build
pm2 restart myapp

Next Steps

Set up Monitoring
Configure Error Tracking
Review Security

Documentation

Get started with your app development

Extras

Additional resources and tips

Deployment

Deployment

On this page