Next.js Production Deployment: Vercel and Self-Hosted Options

Deployment Options

Next.js gives you two main deployment paths: Vercel (managed) and self-hosted (VPS). Each has trade-offs depending on your project requirements.

Option 1: Vercel (Recommended for Most Projects)

Vercel is the company behind Next.js, and their platform is optimized for it:

1. Push your code to GitHub

2. Connect the repository on vercel.com

3. Configure environment variables

4. Deploy automatically on every push

Benefits:

Option 2: Self-Hosted on VPS

For full control, you can run Next.js on your own server:

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

# Clone and build
git clone your-repo
cd your-app
npm install
npm run build

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

Nginx Reverse Proxy

For self-hosted deployments, use Nginx as a reverse proxy:

server {
    listen 80;
    server_name your-domain.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;
    }
}

Environment Variables

Both approaches use environment variables for configuration:

NEXT_PUBLIC_API_URL=https://api.your-domain.com
NEXT_PUBLIC_SITE_URL=https://your-domain.com

On Vercel, set these in the dashboard. On VPS, use .env.local or PM2 ecosystem files.

Build Optimization

# Analyze your bundle
ANALYZE=true npm run build

# Check for issues
npm run build 2>&1 | grep -i "warn|error"

Key Takeaways