Cara Deploy Next.js ke VPS Tanpa Vercel (2026)

Deploy Next.js ke VPS berarti menjalankan aplikasi di server milik sendiri memakai Node.js, Nginx sebagai reverse proxy, dan proses manager seperti systemd, alih-alih menyewa platform terkelola seperti Vercel. Caranya: build dengan output: "standalone", salin hasil build ke server, jalankan lewat systemd, lalu pasang Nginx dan sertifikat TLS gratis dari Let's Encrypt.

Ringkasan cepat:

1. Build Next.js dengan output: "standalone" di next.config.ts untuk menghasilkan paket Node.js mandiri.
2. Salin manual folder public/ dan .next/static ke .next/standalone - keduanya tidak otomatis disertakan.
3. Jalankan server.js hasil build lewat systemd atau PM2 agar tetap aktif dan otomatis restart setelah crash/reboot.
4. Pasang Nginx sebagai reverse proxy di depan Node.js (port 3000 tidak diekspos langsung ke internet).
5. Aktifkan TLS gratis dengan Certbot (Let's Encrypt), yang juga mengatur perpanjangan sertifikat otomatis.

Kenapa Deploy Next.js ke VPS Sendiri, Bukan ke Vercel?#

Alasan paling umum adalah kontrol biaya dan kontrol infrastruktur. Menurut dokumentasi resmi Vercel (per Juli 2026), paket Hobby dibatasi 100GB fast data transfer per bulan, 1 juta function invocation per bulan, dan maksimal 100 deployment per hari. Begitu kuota habis, dalam banyak kasus fitur akan dijeda sampai siklus billing berikutnya. Paket berbayar (Pro) menaikkan batas ini tapi biayanya naik seiring trafik.

Paket Hobby Vercel dibatasi 100GB fast data transfer per bulan, 1 juta function invocation per bulan, dan maksimal 100 deployment per hari (dokumentasi resmi Vercel, per Juli 2026).

VPS sebaliknya punya struktur biaya flat per bulan tanpa peduli seberapa besar trafik yang datang (selama masih dalam kapasitas server), sehingga lebih dapat diprediksi untuk proyek jangka panjang dengan trafik yang terus tumbuh. Trade-off-nya: semua hal yang biasanya otomatis di Vercel (TLS, scaling, deployment pipeline) harus disiapkan manual.

Kapan Sebaiknya Tetap Pakai Vercel?#

Untuk proyek kecil dengan trafik rendah, prototipe cepat, atau tim yang tidak punya waktu mengurus server, Vercel (atau platform serupa) tetap masuk akal karena menghilangkan seluruh beban operasional di bawah ini. Deploy ke VPS baru sepadan ketika kontrol biaya jangka panjang atau kebutuhan kustomisasi infrastruktur lebih penting daripada kenyamanan.

Apa Itu Output "Standalone" dan Kenapa Penting untuk Deploy VPS?#

output: "standalone" adalah opsi di next.config.ts yang membuat next build menghasilkan paket Node.js mandiri di .next/standalone, berisi hanya dependency yang benar-benar dipakai saat runtime, tanpa perlu menyalin seluruh node_modules ke server produksi. Ini membuat ukuran deployment jauh lebih kecil dibanding menyalin seluruh proyek.

Satu hal yang sering terlewat: Next.js tidak otomatis menyalin folder public/ dan .next/static ke dalam .next/standalone. Keduanya harus disalin manual setelah build, atau aset statis dan gambar akan 404 di production meski aplikasi tetap berjalan. Ini bukan bug, melainkan perilaku yang didokumentasikan resmi di dokumentasi Next.js soal opsi output:

This minimal server does not copy the public or .next/static folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the standalone/public and standalone/.next/static folders manually, after which server.js file will serve these automatically.

Bagaimana Cara Build dan Menyiapkan Next.js untuk VPS?#

Urutan dasarnya:

npm ci
npm run build
cp -r public .next/standalone/public
cp -r .next/static .next/standalone/.next/static

Setelah itu, .next/standalone sudah berisi server.js yang bisa dijalankan langsung dengan Node.js, tanpa perlu next start maupun node_modules penuh:

cd .next/standalone
NODE_ENV=production PORT=3000 node server.js

Buka http://<ip-vps>:3000 untuk memastikan server merespons sebelum lanjut ke setup proses permanen.

Variabel Environment#

Next.js otomatis membaca .env.production saat NODE_ENV=production. Untuk server standalone yang dijalankan lewat systemd atau PM2, environment perlu diteruskan eksplisit lewat EnvironmentFile (systemd) atau --env-file (PM2) karena proses tidak lagi berjalan dari direktori proyek yang sama seperti saat development.

Bagaimana Cara Menjalankan Next.js di VPS Secara Permanen dengan systemd?#

Server yang dijalankan manual lewat node server.js akan mati begitu terminal ditutup. Untuk produksi, proses ini perlu dikelola oleh systemd (bawaan Linux) atau PM2 agar otomatis restart bila crash dan otomatis menyala kembali setelah reboot server.

systemd dipakai sebagai contoh utama di panduan ini karena mayoritas VPS yang dipakai untuk deploy aplikasi web memang berjalan di atas Linux — sekitar 60% dari seluruh VPS secara global menggunakan Linux sebagai sistem operasi (data Global Market Insights, dikutip ScalaHosting, 2025), dan systemd adalah process manager bawaan hampir semua distribusi Linux modern (Ubuntu, Debian, CentOS/RHEL), sehingga tidak perlu instalasi tambahan seperti PM2.

Contoh unit systemd minimal:

[Unit]
Description=Aplikasi Next.js
After=network.target
 
[Service]
Type=simple
User=www-data
WorkingDirectory=/var/www/nama-aplikasi
Environment=NODE_ENV=production
ExecStart=/usr/bin/node server.js
Restart=always
RestartSec=5
 
[Install]
WantedBy=multi-user.target

Aktifkan dengan:

sudo systemctl daemon-reload
sudo systemctl enable --now nama-aplikasi

Alternatif yang lebih mudah bagi yang belum familiar dengan systemd adalah PM2 (pm2 start server.js --name nama-aplikasi), yang punya perintah serupa (pm2 save, pm2 startup) untuk auto-start setelah reboot.

Bagaimana Cara Setup Nginx sebagai Reverse Proxy dan TLS?#

Node.js sebaiknya tidak diekspos langsung ke internet di port 3000. Nginx berperan sebagai reverse proxy yang menerima trafik di port 80/443 lalu meneruskannya ke aplikasi Node secara internal:

server {
    listen 443 ssl http2;
    server_name domain-anda.com;
 
    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

Sertifikat TLS didapat gratis lewat Certbot (Let's Encrypt):

sudo certbot --nginx -d domain-anda.com

Certbot otomatis melengkapi konfigurasi ssl_certificate di atas dan memasang penjadwalan perpanjangan otomatis, sehingga sertifikat tidak perlu diperbarui manual setiap beberapa bulan.

Ringkasan#

• Deploy Next.js ke VPS memakai tiga komponen inti: build output: "standalone", proses manager (systemd/PM2) supaya server tetap hidup, dan Nginx sebagai reverse proxy plus TLS.
• Folder public/ dan .next/static wajib disalin manual ke .next/standalone setelah build, karena Next.js tidak melakukannya otomatis.
• VPS cocok untuk trafik menengah-tinggi dengan biaya flat per bulan, sementara paket gratis Vercel dibatasi kuota bandwidth (100GB/bulan per 2026) yang bisa menghentikan situs sementara bila terlampaui.
• Situs ini sendiri (irfanramadhan.com) berjalan dengan pola yang sama: build standalone, systemd, dan Nginx reverse proxy di VPS. Butuh bantuan menyiapkan hal serupa? Lihat layanan pengembangan web yang ditawarkan.
• Setelah situs live di VPS, langkah lanjutan yang sering terlewat adalah memastikan sitemap.xml dan robots.txt tetap dihasilkan benar dan bisa diakses crawler (termasuk crawler AI seperti GPTBot/ClaudeBot/PerplexityBot). Lihat cara membuat sitemap.xml dan robots.txt dinamis di Next.js App Router.
• Sitemap dan robots.txt membantu crawler menemukan dan mengakses halaman, tapi tidak menjelaskan isinya. Langkah pelengkap untuk membuat konten lebih mudah dipahami dan dikutip AI search engine adalah menambahkan structured data. Lihat cara implementasi schema markup JSON-LD di Next.js.