Cara Deploy & Hosting Next.js: Panduan Lengkap Vercel, VPS, & Shared Hosting

Cara Hosting Next.js: Pilihan Platform dan Panduan Lengkap

Sudah selesai membangun aplikasi Next.js dan siap dipublikasikan? Pertanyaan berikutnya adalah: bagaimana cara hosting Next.js yang paling tepat?

Hosting Next.js berbeda dari hosting website statis biasa. Karena Next.js mendukung berbagai mode rendering (SSR, SSG, ISR, dan Server Components), pilihan hosting yang tepat sangat mempengaruhi performa, biaya, dan kemudahan pengelolaan aplikasi Anda. Ada yang memerlukan server Node.js yang aktif terus-menerus, ada yang bisa di-host sebagai file statis saja.

Dalam panduan lengkap ini, kami akan membahas semua opsi hosting Next.js: dari Vercel (paling mudah), VPS dengan Nginx dan PM2 (kontrol penuh), hingga shared hosting (paling ekonomis untuk output statis). Setiap opsi disertai langkah-langkah detail dan tips konfigurasi untuk production.

Memahami Mode Output Next.js

Sebelum memilih hosting, penting memahami mode output Next.js karena menentukan jenis hosting yang dibutuhkan:

Jika aplikasi Anda menggunakan SSR, ISR, API Routes, atau Server Components, Anda memerlukan hosting yang menjalankan Node.js. Jika seluruh aplikasi adalah SSG/static export, Anda bisa menggunakan hosting statis manapun.

Persiapan Sebelum Deploy

Pastikan hal-hal berikut sudah disiapkan sebelum melakukan deploy:

1. Konfigurasi Environment Variables

Buat file .env.production untuk menyimpan variabel produksi:

# .env.production
NEXT_PUBLIC_SITE_URL=https://domainanda.com
DATABASE_URL=postgresql://user:password@host:5432/dbname
NEXTAUTH_SECRET=your-secret-key-minimum-32-chars
NEXTAUTH_URL=https://domainanda.com
API_KEY=your-api-key

Variabel dengan prefix NEXT_PUBLIC_ akan terekspos ke browser - jangan taruh credential sensitif di variabel ini. Pastikan .env.production ada di .gitignore.

2. Optimasi next.config.ts

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

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

  // Optimasi gambar
  images: {
    formats: ["image/avif", "image/webp"],
    minimumCacheTTL: 86400, // cache gambar 24 jam
    domains: ["cdn.domainanda.com"],
  },

  // Header keamanan
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
        ],
      },
    ];
  },
};

export default nextConfig;

3. Build dan Test Lokal

# Build aplikasi
npm run build

# Jalankan versi production lokal untuk testing
npm run start

# Cek apakah ada error atau warning di terminal

Selalu test hasil build secara lokal sebelum deploy ke server. Jalankan di http://localhost:3000 dan pastikan semua fitur berjalan normal.

Opsi 1: Deploy ke Vercel (Termudah dan Direkomendasikan)

Vercel adalah platform hosting yang dibuat oleh tim yang sama yang membuat Next.js. Tidak mengherankan jika Vercel adalah cara hosting Next.js yang paling mudah dan paling dioptimasi. Tier gratis Vercel mencakup:

• 100 GB bandwidth per bulan
• Unlimited deployments
• SSL otomatis
• Preview deployments untuk setiap pull request
• Edge Network global (CDN)

Langkah Deploy ke Vercel via GitHub

1. Push kode ke GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/username/nama-repo.git
   git push -u origin main

2. Hubungkan ke Vercel: Kunjungi vercel.com, klik "Sign Up" dengan akun GitHub. Setelah login, klik "Add New Project".
3. Import repository: Pilih repository Next.js Anda dari daftar. Vercel otomatis mendeteksi bahwa ini adalah proyek Next.js.
4. Konfigurasi project:
   • Framework Preset: Next.js (otomatis terdeteksi)
   • Root Directory: ./ (atau folder Next.js jika monorepo)
   • Build Command: npm run build
   • Output Directory: .next
5. Tambahkan Environment Variables: Di bagian "Environment Variables", masukkan semua variabel dari .env.production Anda.
6. Klik Deploy dan tunggu proses build selesai (biasanya 1-3 menit).

Menghubungkan Custom Domain ke Vercel

1. Di Vercel Dashboard, buka project Anda → Settings → Domains
2. Klik "Add Domain" dan masukkan domain Anda (contoh: domainanda.com)
3. Vercel akan memberikan instruksi DNS. Tambahkan record berikut di DNS provider Anda:

# Untuk root domain (A record)
Type: A
Name: @
Value: 76.76.21.21

# Untuk www (CNAME)
Type: CNAME
Name: www
Value: cname.vercel-dns.com

SSL akan diaktifkan otomatis setelah DNS propagasi selesai (biasanya 5-60 menit).

Continuous Deployment

Salah satu keunggulan besar Vercel: setiap kali Anda push ke branch main di GitHub, Vercel otomatis melakukan re-deploy. Push ke branch lain akan membuat preview deployment dengan URL unik - sempurna untuk review sebelum merge.

Opsi 2: Deploy ke VPS dengan Nginx dan PM2

Jika Anda menginginkan kontrol penuh atas server, harga lebih ekonomis untuk traffic tinggi, atau perlu hosting beberapa aplikasi di satu server, VPS adalah pilihan yang tepat.

Persiapan VPS

Spesifikasi minimum yang direkomendasikan untuk Next.js production:

• CPU: 2 vCPU
• RAM: 2 GB (minimum 1 GB, 4 GB untuk traffic tinggi)
• Storage: 20 GB SSD
• OS: Ubuntu 22.04 LTS

Langkah 1: Akses VPS via SSH

ssh root@IP_VPS_ANDA
# atau jika pakai SSH key:
ssh -i ~/.ssh/id_rsa root@IP_VPS_ANDA

Langkah 2: Update Sistem dan Install Node.js

# Update package list
apt update && apt upgrade -y

# Install Node.js via NodeSource (versi LTS terbaru)
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 Nginx

apt install -y nginx
systemctl start nginx
systemctl enable nginx  # jalankan otomatis saat server restart

Langkah 4: Clone Repository dan Build

# Buat user khusus untuk aplikasi (praktik keamanan yang baik)
adduser --disabled-password --gecos "" appuser
su - appuser

# Clone repository
git clone https://github.com/username/nama-repo.git /home/appuser/nextjs-app
cd /home/appuser/nextjs-app

# Install dependensi
npm ci --production=false

# Buat file .env.production
nano .env.production
# Masukkan semua environment variables, lalu simpan (Ctrl+X, Y, Enter)

# Build aplikasi
npm run build

Langkah 5: Jalankan Next.js dengan PM2

# Jalankan aplikasi Next.js
pm2 start npm --name "nextjs-app" -- start

# Cek status
pm2 status

# Lihat log
pm2 logs nextjs-app

# Simpan konfigurasi PM2 agar auto-start setelah reboot
pm2 save
pm2 startup
# Jalankan perintah yang muncul dari output pm2 startup

Buat file konfigurasi PM2 (ecosystem.config.js) untuk konfigurasi yang lebih lengkap:

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: "nextjs-app",
      script: "node_modules/.bin/next",
      args: "start",
      cwd: "/home/appuser/nextjs-app",
      instances: "max",        // gunakan semua CPU core
      exec_mode: "cluster",    // mode cluster untuk load balancing
      env_production: {
        NODE_ENV: "production",
        PORT: 3000,
      },
      max_memory_restart: "1G", // restart jika memori melebihi 1 GB
      error_file: "/home/appuser/logs/err.log",
      out_file: "/home/appuser/logs/out.log",
    },
  ],
};

pm2 start ecosystem.config.js --env production

Langkah 6: Konfigurasi Nginx sebagai Reverse Proxy

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

# /etc/nginx/sites-available/domainanda.com
server {
    listen 80;
    server_name domainanda.com www.domainanda.com;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript
               text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1000;

    # Proxy ke Next.js
    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_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;
    }

    # Cache file statis Next.js
    location /_next/static/ {
        proxy_pass http://localhost:3000;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
}

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

# Test konfigurasi Nginx
nginx -t

# Reload Nginx
systemctl reload nginx

Langkah 7: Pasang SSL dengan Let's Encrypt

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

# Dapatkan sertifikat SSL
certbot --nginx -d domainanda.com -d www.domainanda.com

# Ikuti instruksi (masukkan email, setujui TOS)
# Certbot akan otomatis mengkonfigurasi Nginx untuk HTTPS

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

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

Langkah 8: Setup Deployment Otomatis (Opsional)

Buat script untuk update aplikasi tanpa downtime:

#!/bin/bash
# /home/appuser/deploy.sh

set -e  # Hentikan jika ada error

echo "Pulling latest code..."
cd /home/appuser/nextjs-app
git pull origin main

echo "Installing dependencies..."
npm ci --production=false

echo "Building application..."
npm run build

echo "Restarting PM2..."
pm2 reload nextjs-app --update-env

echo "Deploy selesai!"

chmod +x /home/appuser/deploy.sh

# Jalankan deploy
/home/appuser/deploy.sh

Opsi 3: Static Export ke Shared Hosting

Jika aplikasi Next.js Anda tidak menggunakan SSR, ISR, atau API Routes dinamis, Anda bisa mengekspor sebagai file statis dan meng-host-nya di shared hosting biasa - ini jauh lebih murah.

Konfigurasi Static Export

// next.config.ts
const nextConfig: NextConfig = {
  output: "export",      // aktifkan static export
  trailingSlash: true,   // /blog/post/ bukan /blog/post
  images: {
    unoptimized: true,   // wajib untuk static export
  },
};

export default nextConfig;

# Build dan export
npm run build

# Output ada di folder 'out/'
ls out/

Upload ke cPanel Shared Hosting

1. Login ke cPanel hosting Anda
2. Buka File Manager → navigasi ke folder public_html/
3. Upload seluruh isi folder out/ ke public_html/
4. Buat file .htaccess di public_html/ untuk menangani 404 dan routing:

# .htaccess untuk Next.js Static Export
Options -MultiViews
RewriteEngine On

# Handle 404 - arahkan ke 404.html
ErrorDocument 404 /404.html

# Redirect www ke non-www (opsional)
RewriteCond %{HTTP_HOST} ^www.(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]

# Pastikan HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Keterbatasan Static Export

Perlu diketahui bahwa tidak semua fitur Next.js tersedia dalam mode static export:

• API Routes tidak berfungsi (perlu backend terpisah)
• ISR (Incremental Static Regeneration) tidak tersedia
• Middleware tidak berfungsi
• Komponen Image tidak bisa melakukan optimasi otomatis
• Server Components hanya bisa digunakan untuk pre-render, bukan request dinamis

Perbandingan Opsi Hosting Next.js

Tips Optimasi Performa Next.js di Production

• Aktifkan standalone output untuk deployment yang lebih ringan di VPS:

  // next.config.ts
  output: "standalone"

  Ini akan membuat folder .next/standalone yang bisa dijalankan tanpa node_modules lengkap.
• Gunakan React Server Components untuk mengurangi JavaScript yang dikirim ke browser. Data fetching di server lebih cepat dan aman.
• Optimalkan gambar - gunakan komponen <Image> dari Next.js, bukan tag <img> biasa. Ini otomatis menerapkan lazy loading, WebP, dan responsive images.
• Monitor performa dengan Vercel Analytics (gratis) atau setup Prometheus + Grafana di VPS untuk tracking metrics secara real-time.
• Gunakan CDN untuk aset statis - Cloudflare gratis tier sudah cukup untuk mempercepat loading gambar dan CSS di seluruh Indonesia.

Troubleshooting Masalah Umum

Error: Port sudah digunakan

# Cari proses yang menggunakan port 3000
lsof -i :3000
# atau
netstat -tlnp | grep 3000

# Kill proses tersebut
kill -9 PID_PROSES

# Restart PM2
pm2 restart nextjs-app

Error: Module not found setelah deploy

# Hapus node_modules dan install ulang
rm -rf node_modules .next
npm ci
npm run build
pm2 restart nextjs-app

Website tidak bisa diakses setelah konfigurasi Nginx

# Cek status Nginx
systemctl status nginx

# Lihat error log Nginx
tail -100 /var/log/nginx/error.log

# Pastikan konfigurasi valid
nginx -t

# Restart Nginx
systemctl restart nginx

FAQ: Cara Hosting Next.js

Kesimpulan

Memilih cara hosting Next.js yang tepat bergantung pada kebutuhan dan kondisi proyek Anda. Untuk pemula atau proyek baru, Vercel adalah pilihan terbaik - setup dalam 5 menit, SSL otomatis, CI/CD bawaan, dan tier gratis yang cukup untuk banyak proyek.

Ketika proyek Anda mulai tumbuh dan memerlukan kontrol lebih besar, fleksibilitas konfigurasi, atau penghematan biaya untuk traffic tinggi, migrasi ke VPS dengan Nginx dan PM2 adalah langkah yang tepat. Investasi waktu untuk setup VPS akan terbayar dengan kontrol penuh dan biaya yang lebih prediktabel.

Jika aplikasi Anda sepenuhnya statis (blog, company profile, portfolio), manfaatkan fitur static export Next.js dan deploy ke shared hosting Indonesia yang lebih terjangkau - sambil tetap menikmati keunggulan developer experience Next.js selama pengembangan.

Apapun pilihan hosting Anda, pastikan SSL sudah terpasang, environment variables tersimpan aman, dan lakukan monitoring rutin terhadap uptime dan performa. Dengan infrastruktur yang solid, aplikasi Next.js Anda siap melayani pengguna Indonesia dengan cepat dan andal.