Cara Deploy Next.js ke Vercel dan VPS: Panduan Lengkap 2026

Pendahuluan: Cara Deploy Next.js ke Production

Anda sudah selesai membangun website Next.js dan siap dipublikasikan ke dunia nyata. Tapi cara deploy Next.js yang tepat seperti apa? Ini adalah pertanyaan yang sering membingungkan developer pemula, karena Next.js berbeda dari website statis biasa - ia memerlukan lingkungan runtime Node.js untuk menjalankan fitur-fitur canggihnya seperti SSR dan API Routes.

Dalam panduan ini, kami akan membahas dua jalur deploy Next.js yang paling populer: Vercel (platform resmi dari pembuat Next.js, paling mudah untuk pemula) dan VPS Linux dengan Nginx + PM2 (kontrol penuh dan lebih hemat untuk traffic tinggi). Anda juga akan mempelajari cara mengkonfigurasi domain kustom, SSL, environment variables, dan automated deployment agar proses deploy menjadi cepat dan bebas downtime.

Persiapan Sebelum Deploy

Sebelum mulai deploy, pastikan semua hal berikut sudah siap:

1. Test Build Lokal

Selalu jalankan build production secara lokal sebelum deploy ke server. Ini memastikan tidak ada error yang baru muncul saat build:

# Bersihkan cache sebelumnya (opsional)
rm -rf .next

# Build untuk production
npm run build

# Jalankan versi production secara lokal
npm run start

# Buka http://localhost:3000 dan test semua fitur

Pastikan tidak ada error merah di terminal saat build, semua halaman terbuka dengan benar, dan tidak ada warning kritis yang perlu diselesaikan.

2. Siapkan Environment Variables

Buat daftar semua environment variable yang digunakan aplikasi. Pisahkan antara variabel yang aman diekspos ke browser (prefix NEXT_PUBLIC_) dan yang harus tetap rahasia (database URL, API key, secret key):

# .env.example (commit ini ke repo sebagai dokumentasi)
NEXT_PUBLIC_SITE_URL=https://domainanda.com
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

# Variabel rahasia - JANGAN commit ke repo
DATABASE_URL=postgresql://user:password@host:5432/dbname
NEXTAUTH_SECRET=random-string-minimum-32-karakter
NEXTAUTH_URL=https://domainanda.com
RESEND_API_KEY=re_xxxxxxxxxxxx

Pastikan file .env.local dan .env.production sudah ada di .gitignore agar tidak ter-commit ke repository.

3. Optimasi next.config.ts untuk Production

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

const nextConfig: NextConfig = {
  // Kompres response otomatis
  compress: true,

  // Gunakan standalone output untuk deployment lebih ringan
  output: "standalone",

  // Konfigurasi domain gambar eksternal
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [
      { protocol: "https", hostname: "cdn.domainanda.com" },
    ],
  },

  // Security headers
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "X-XSS-Protection", value: "1; mode=block" },
          {
            key: "Strict-Transport-Security",
            value: "max-age=63072000; includeSubDomains; preload",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
        ],
      },
    ];
  },

  // Redirect trailing slash (opsional, konsistenkan URL)
  trailingSlash: false,
};

export default nextConfig;

Opsi 1: Deploy Next.js ke Vercel

Vercel adalah platform hosting buatan tim yang sama yang membuat Next.js. Ini adalah cara deploy Next.js yang paling mudah dan paling dioptimasi - semua fitur Next.js termasuk SSR, ISR, dan Edge Functions didukung penuh secara native. Tier gratis Vercel mencakup:

• 100 GB bandwidth per bulan
• Deployment tak terbatas
• SSL otomatis gratis
• Preview deployment untuk setiap pull request
• Edge Network CDN global (termasuk Asia Tenggara)
• Analitik performa dasar

Langkah 1: Push Kode ke GitHub

# Inisialisasi repository git (jika belum)
git init
git add .
git commit -m "Initial commit: setup Next.js website"

# Buat repository baru di github.com, lalu:
git remote add origin https://github.com/username/nama-repo.git
git branch -M main
git push -u origin main

Langkah 2: Import Proyek ke Vercel

1. Kunjungi vercel.com dan klik "Sign Up"
2. Pilih "Continue with GitHub" - otorkan akses ke akun GitHub Anda
3. Di dashboard, klik tombol "Add New Project"
4. Pilih repository Next.js Anda dari daftar
5. Vercel akan otomatis mendeteksi framework Next.js dan mengisi build settings:
   • Framework Preset: Next.js
   • Build Command: npm run build
   • Output Directory: .next
   • Install Command: npm install

Langkah 3: Tambahkan Environment Variables

Sebelum klik Deploy, tambahkan semua environment variables yang dibutuhkan:

1. Scroll ke bagian "Environment Variables" di halaman konfigurasi proyek
2. Masukkan setiap variabel satu per satu (Name dan Value)
3. Pilih environment yang sesuai: Production, Preview, atau Development
4. Klik "Add" setelah setiap variabel

Untuk variabel yang berbeda antara preview dan production (seperti URL callback), Anda bisa mengatur nilainya per environment di Settings → Environment Variables setelah deployment pertama.

Langkah 4: Deploy!

Klik tombol "Deploy" dan tunggu proses build selesai (biasanya 1-5 menit). Anda akan melihat log build secara real-time. Setelah selesai, Vercel memberikan URL nama-repo.vercel.app untuk mengakses website Anda.

Langkah 5: Menghubungkan Domain Kustom

1. Di Vercel dashboard, buka proyek Anda → klik tab Settings → Domains
2. Masukkan domain Anda (contoh: domainanda.com) dan klik Add
3. Vercel memberikan instruksi DNS. Masuk ke panel DNS domain Anda dan tambahkan:

# Untuk root domain - tambahkan A Record:
Type: A
Name: @ (atau kosong)
Value: 76.76.21.21
TTL: Auto

# Untuk subdomain www - tambahkan CNAME:
Type: CNAME
Name: www
Value: cname.vercel-dns.com
TTL: Auto

DNS propagasi biasanya memakan waktu 5-60 menit. SSL akan diaktifkan otomatis setelah propagasi selesai - tidak ada konfigurasi tambahan yang diperlukan.

Continuous Deployment Otomatis

Keunggulan besar Vercel: setiap kali Anda push commit ke branch main, Vercel otomatis melakukan re-deploy. Push ke branch lain (misalnya saat membuat pull request) akan membuat preview deployment dengan URL unik - sangat berguna untuk review sebelum merge ke main.

Opsi 2: Deploy Next.js ke VPS Linux

VPS (Virtual Private Server) adalah pilihan yang tepat jika Anda menginginkan kontrol penuh atas server, ingin hosting beberapa aplikasi di satu mesin, atau memiliki traffic tinggi yang konsisten dan ingin menghemat biaya hosting.

Spesifikasi VPS yang Direkomendasikan

OS yang direkomendasikan: Ubuntu 22.04 LTS atau Ubuntu 24.04 LTS.

Langkah 1: Akses VPS dan Konfigurasi Awal

# Login via SSH
ssh root@IP_VPS_ANDA

# Update sistem
apt update && apt upgrade -y

# Install paket yang dibutuhkan
apt install -y git curl wget unzip ufw fail2ban

# Konfigurasi firewall dasar
ufw allow OpenSSH
ufw allow 80/tcp
ufw allow 443/tcp
ufw enable

Langkah 2: Install Node.js (via NodeSource)

# Install Node.js 22 LTS
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt install -y nodejs

# Verifikasi
node --version   # v22.x.x
npm --version    # 10.x.x

# Install PM2 secara global
npm install -g pm2

Langkah 3: Install dan Konfigurasi Nginx

# Install Nginx
apt install -y nginx

# Start dan enable Nginx
systemctl start nginx
systemctl enable nginx

# Cek status
systemctl status nginx

Langkah 4: Buat User Aplikasi (Best Practice Keamanan)

# Buat user khusus tanpa password login
adduser --disabled-password --gecos "" appuser

# Beri izin ke direktori web
mkdir -p /var/www/nextjs-app
chown appuser:appuser /var/www/nextjs-app

Langkah 5: Clone Repo dan Build Aplikasi

# Pindah ke user appuser
su - appuser

# Clone repository Anda
git clone https://github.com/username/nama-repo.git /var/www/nextjs-app
cd /var/www/nextjs-app

# Install dependensi production
npm ci

# Buat file environment variables production
cat > .env.production << 'EOF'
NEXT_PUBLIC_SITE_URL=https://domainanda.com
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
NEXTAUTH_SECRET=ganti-dengan-random-string-32-karakter
NEXTAUTH_URL=https://domainanda.com
EOF

# Build aplikasi
npm run build

Langkah 6: Jalankan Next.js dengan PM2

Buat file konfigurasi PM2 untuk manajemen proses yang lebih baik:

# Buat ecosystem.config.js
cat > /var/www/nextjs-app/ecosystem.config.js << 'EOF'
module.exports = {
  apps: [
    {
      name: "nextjs-app",
      script: "node_modules/.bin/next",
      args: "start",
      cwd: "/var/www/nextjs-app",
      instances: "max",
      exec_mode: "cluster",
      env_production: {
        NODE_ENV: "production",
        PORT: 3000,
      },
      max_memory_restart: "1G",
      error_file: "/var/log/pm2/nextjs-err.log",
      out_file: "/var/log/pm2/nextjs-out.log",
      log_date_format: "YYYY-MM-DD HH:mm:ss",
    },
  ],
};
EOF

# Buat direktori log
mkdir -p /var/log/pm2

# Jalankan aplikasi
pm2 start ecosystem.config.js --env production

# Cek status
pm2 status

# Lihat log real-time
pm2 logs nextjs-app --lines 50

# Simpan konfigurasi dan setup auto-start
pm2 save
pm2 startup
# Salin dan jalankan perintah yang muncul dari output pm2 startup

Langkah 7: Konfigurasi Nginx sebagai Reverse Proxy

# Hapus konfigurasi default Nginx
rm /etc/nginx/sites-enabled/default

# Buat konfigurasi untuk domain Anda
nano /etc/nginx/sites-available/domainanda.com

Isi file konfigurasi Nginx:

upstream nextjs {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name domainanda.com www.domainanda.com;

    # Gzip compression
    gzip on;
    gzip_comp_level 5;
    gzip_types text/plain text/css application/json application/javascript
               text/xml application/xml application/xml+rss text/javascript
               application/vnd.ms-fontobject application/x-font-ttf
               font/opentype image/svg+xml image/x-icon;
    gzip_min_length 1000;
    gzip_vary on;

    # Batasi ukuran upload
    client_max_body_size 50M;

    # Proxy ke Next.js
    location / {
        proxy_pass http://nextjs;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }

    # Cache aset statis Next.js selama 1 tahun
    location /_next/static/ {
        proxy_pass http://nextjs;
        add_header Cache-Control "public, max-age=31536000, immutable";
        access_log off;
    }

    # Cache file publik
    location /public/ {
        proxy_pass http://nextjs;
        add_header Cache-Control "public, max-age=86400";
    }
}

# Aktifkan konfigurasi
ln -s /etc/nginx/sites-available/domainanda.com /etc/nginx/sites-enabled/

# Test konfigurasi
nginx -t

# Reload Nginx
systemctl reload nginx

Langkah 8: Install SSL dengan Let's Encrypt

# Install Certbot
apt install -y certbot python3-certbot-nginx

# Dapatkan sertifikat SSL (ganti dengan domain Anda)
certbot --nginx -d domainanda.com -d www.domainanda.com   --non-interactive --agree-tos --email admin@domainanda.com

# Verifikasi auto-renewal
certbot renew --dry-run

# Certbot otomatis menambahkan cron job untuk renewal setiap 90 hari
systemctl status certbot.timer

Setelah langkah ini, website Anda sudah bisa diakses melalui https://domainanda.com dengan sertifikat SSL yang valid dan akan diperbarui otomatis.

Langkah 9: Script Deploy Otomatis

Buat script untuk proses update yang mudah dan tanpa downtime:

# Buat script deploy
cat > /var/www/nextjs-app/deploy.sh << 'SCRIPT'
#!/bin/bash
set -e

APP_DIR="/var/www/nextjs-app"
APP_NAME="nextjs-app"

echo "[$(date)] Memulai proses deploy..."

cd $APP_DIR

echo "1. Pulling kode terbaru dari GitHub..."
git pull origin main

echo "2. Installing dependensi..."
npm ci

echo "3. Building aplikasi..."
npm run build

echo "4. Reload aplikasi (tanpa downtime)..."
pm2 reload $APP_NAME --update-env

echo "[$(date)] Deploy berhasil!"
SCRIPT

chmod +x /var/www/nextjs-app/deploy.sh

# Cara menjalankan deploy:
# su - appuser -c "/var/www/nextjs-app/deploy.sh"

Setup Monitoring dan Alerting

Setelah aplikasi berjalan di production, penting untuk memantau kesehatan dan performa server:

Monitoring dengan PM2

# Lihat status semua aplikasi
pm2 status

# Monitor CPU dan RAM secara real-time
pm2 monit

# Lihat log terbaru
pm2 logs nextjs-app --lines 100

# Restart jika ada masalah
pm2 restart nextjs-app

# Reload tanpa downtime (untuk update kode)
pm2 reload nextjs-app

Cek Penggunaan Resource Server

# Penggunaan RAM dan CPU
htop

# Penggunaan disk
df -h

# Cek log Nginx
tail -100 /var/log/nginx/access.log
tail -100 /var/log/nginx/error.log

Perbandingan Deploy Next.js: Vercel vs VPS

Troubleshooting Masalah Umum saat Deploy

Build Gagal karena Environment Variables Tidak Ada

# Error: process.env.NAMA_VAR is undefined
# Solusi: Pastikan semua env vars sudah ditambahkan di Vercel
# atau .env.production di VPS sudah diisi dengan benar

# Di Vercel: Settings → Environment Variables → Add
# Di VPS: nano /var/www/nextjs-app/.env.production

Error 502 Bad Gateway di Nginx

# Artinya Nginx tidak bisa terhubung ke Next.js di port 3000
# Cek apakah PM2/Next.js sedang berjalan:
pm2 status

# Jika mati, start ulang:
pm2 start ecosystem.config.js --env production

# Cek apakah port 3000 aktif:
ss -tlnp | grep 3000

Website Lambat setelah Deploy

# Aktifkan output standalone di next.config.ts untuk performa lebih baik:
# output: "standalone"

# Pastikan gzip aktif di Nginx (lihat konfigurasi di atas)
# Gunakan CDN seperti Cloudflare di depan server untuk cache global

# Monitor memori - jika PM2 sering restart karena OOM:
pm2 logs nextjs-app | grep "restart"
# Solusi: upgrade RAM VPS atau optimalkan kode Next.js

FAQ: Cara Deploy Next.js

Kesimpulan

Cara deploy Next.js yang paling tepat bergantung pada kebutuhan, anggaran, dan tingkat keahlian Anda. Untuk pemula dan proyek baru, Vercel adalah pilihan terbaik - setup hanya 5-10 menit, CI/CD otomatis dari GitHub, SSL gratis, dan tier gratis yang cukup untuk banyak proyek.

Ketika proyek Anda mulai tumbuh dan traffic makin tinggi, VPS dengan Nginx dan PM2 menawarkan kontrol penuh dan biaya yang lebih terprediktabel. Investasi waktu untuk setup awal akan terbayar dengan fleksibilitas yang tidak terbatas - Anda bisa menjalankan beberapa aplikasi di satu server, mengkonfigurasi caching yang lebih agresif, dan mengoptimalkan sesuai kebutuhan spesifik aplikasi Anda.

Apapun platform yang Anda pilih, pastikan selalu: test build lokal sebelum deploy, jaga keamanan environment variables, pasang SSL, dan pantau performa secara berkala. Dengan deployment yang solid, website Next.js Anda siap melayani pengguna Indonesia dengan cepat, aman, dan dapat diandalkan.