LarhTech – Next.js telah menjadi standar emas dalam pengembangan aplikasi web modern berbasis React. Kecepatannya, fitur Server-Side Rendering (SSR), dan kemudahan pengembangannya membuat banyak developer jatuh cinta. Biasanya, pilihan utama untuk mempublikasikan aplikasi Next.js adalah Vercel. Memang mudah, cukup klik-klik, dan aplikasi Anda mengudara.
Namun, seiring berkembangnya proyek dan meningkatnya trafik, ketergantungan pada layanan pihak ketiga seperti Vercel mulai memunculkan tantangan tersendiri, terutama dari sisi biaya dan fleksibilitas konfigurasi. Di sinilah VPS (Virtual Private Server) menjadi solusi paling tangguh.
Mengapa menggunakan VPS? Selain biaya yang lebih terjangkau dan tetap (flat), Anda memiliki kendali penuh atas sistem operasi, keamanan, dan sumber daya peladen. Dalam panduan ini, kita akan membedah secara teknis cara melakukan deployment aplikasi Next.js di VPS Ubuntu agar siap digunakan di lingkungan produksi (production ready).
1. Vercel vs VPS: Mengapa Anda Harus Self-Hosting?
Sebelum masuk ke teknis, mari kita pahami filosofinya. Vercel adalah layanan PaaS (Platform as a Service) yang sangat dioptimasi untuk Next.js. Namun, jika Anda memiliki beberapa aplikasi atau membutuhkan integrasi mendalam dengan sistem peladen lokal (seperti Home Server NAS), VPS Ubuntu adalah pilihan yang jauh lebih bijak.
Keuntungan Deploy di VPS:
-
Kendali Penuh: Anda bebas menginstal versi Node.js apa pun, mengatur konfigurasi Nginx, hingga memasang Firewall sesuai kebutuhan.
-
Optimasi Biaya: Satu VPS bisa digunakan untuk menghosting banyak aplikasi sekaligus tanpa biaya tambahan per proyek.
-
Keahlian SysAdmin: Memahami cara kerja deployment di Linux akan meningkatkan nilai jual Anda sebagai Fullstack Developer.
2. Persiapan Awal Peladen (Server Hardening)
Kita asumsikan Anda sudah memiliki VPS dengan sistem operasi Ubuntu 22.04 LTS atau versi terbaru. Hal pertama yang wajib dilakukan adalah memastikan peladen dalam kondisi prima dan aman.
Masuk ke terminal SSH Anda dan jalankan pembaruan sistem:
sudo apt update && sudo apt upgrade -y
Jangan lupa aktifkan firewall sederhana (UFW) untuk melindungi port yang tidak digunakan:
sudo ufw allow OpenSSH
sudo ufw allow <span class="hljs-string">'Nginx Full'</span>
sudo ufw --force <span class="hljs-built_in">enable</span>
3. Instalasi Node.js Menggunakan NVM (Node Version Manager)
Kesalahan pemula adalah menginstal Node.js langsung dari repositori bawaan Ubuntu menggunakan apt install nodejs. Masalahnya, versi yang disediakan sering kali sudah usang. Aplikasi Next.js terbaru membutuhkan versi Node.js yang lebih segar.
Solusi terbaik adalah menggunakan NVM. Dengan NVM, Anda bisa berpindah-pindah versi Node.js dengan satu perintah saja.
Instalasi NVM:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
<span class="hljs-built_in">source</span> ~/.bashrc
Instalasi Node.js (Versi LTS):
nvm install --lts
node -v <span class="hljs-comment"># Pastikan versi terbaru sudah terinstal</span>
4. Menyiapkan Aplikasi Next.js dari Repositori
Sekarang, kita akan menarik kode aplikasi Anda dari GitHub atau GitLab. Pastikan aplikasi Anda sudah siap untuk produksi.
-
Clone Repositori:
<span class="hljs-built_in">cd</span> /var/www sudo git <span class="hljs-built_in">clone</span> https://github.com/username/proyek-anda.git sudo chown -R <span class="hljs-variable">$USER</span>:<span class="hljs-variable">$USER</span> proyek-anda <span class="hljs-built_in">cd</span> proyek-anda -
Instalasi Dependencies:
npm install -
Proses Build: Langkah ini sangat krusial. Perintah
buildakan mengonversi kode React Anda menjadi aset statis dan fungsi peladen yang sangat cepat.npm run build
5. Manajemen Proses dengan PM2: Menjaga Aplikasi Tetap Hidup
Jika Anda hanya menjalankan npm start, aplikasi akan mati saat Anda menutup terminal SSH. Di sinilah kita membutuhkan PM2 (Process Manager 2). PM2 bertugas memantau aplikasi Anda 24/7. Jika aplikasi crash, PM2 akan otomatis menghidupkannya kembali.
Instalasi & Menjalankan PM2:
npm install pm2 -g
pm2 start npm --name <span class="hljs-string">"next-app"</span> -- start
Agar aplikasi otomatis menyala saat VPS di-restart (mati lampu/pemeliharaan), jalankan perintah startup ini:
pm2 startup
pm2 save
Trik: Gunakan pm2 status untuk melihat kesehatan aplikasi Anda secara real-time.
6. Mengkonfigurasi Nginx sebagai Reverse Proxy
Aplikasi Next.js Anda saat ini berjalan di port internal (biasanya 3000). Kita tidak ingin pengunjung harus mengetikkan domain.com:3000. Kita ingin mereka cukup mengetikkan domain.com.
Kita akan menggunakan Nginx sebagai “jembatan” (Reverse Proxy) yang akan mengarahkan trafik dari port 80 (HTTP) ke port 3000.
Instalasi Nginx:
sudo apt install nginx -y
Konfigurasi Blok Server: Buat file konfigurasi baru:
sudo nano /etc/nginx/sites-available/next-app
Tempelkan konfigurasi berikut:
<span class="hljs-section">server</span> {
<span class="hljs-attribute">listen</span> <span class="hljs-number">80</span>;
<span class="hljs-attribute">server_name</span> domainanda.com;
<span class="hljs-attribute">location</span> / {
<span class="hljs-attribute">proxy_pass</span> http://localhost:3000;
<span class="hljs-attribute">proxy_http_version</span> <span class="hljs-number">1</span>.<span class="hljs-number">1</span>;
<span class="hljs-attribute">proxy_set_header</span> Upgrade $http_upgrade;
<span class="hljs-attribute">proxy_set_header</span> Connection <span class="hljs-string">'upgrade'</span>;
<span class="hljs-attribute">proxy_set_header</span> Host $host;
<span class="hljs-attribute">proxy_cache_bypass</span> $http_upgrade;
}
}
Aktifkan konfigurasi dan restart Nginx:
sudo ln -s /etc/nginx/sites-available/next-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
7. Keamanan SSL dengan Let’s Encrypt (Certbot)
Website modern tanpa HTTPS (gembok hijau) akan diberi label “Tidak Aman” oleh Chrome dan sangat buruk untuk SEO. Kita akan memasang sertifikat SSL gratis dari Let’s Encrypt menggunakan Certbot.
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d domainanda.com
Ikuti instruksi di layar. Certbot secara otomatis akan mengubah konfigurasi Nginx Anda untuk mendukung HTTPS dan mengatur pembaruan otomatis sertifikat setiap 3 bulan.
8. Troubleshooting: Masalah Umum Deployment
Bahkan developer senior pun sering mengalami hambatan saat deploy. Berikut adalah beberapa solusi cepat:
-
Error: Port 3000 Already in Use: Ini berarti ada proses lain yang menggunakan port tersebut. Gunakan perintah
fuser -k 3000/tcpuntuk mematikan proses tersebut sebelum menjalankan PM2. -
Next.js Image Optimization Error: Jika Anda menggunakan komponen
<Image />dan gambar tidak muncul, pastikan Anda telah menginstal librarysharpdi VPS:npm install sharp. -
Nginx 502 Bad Gateway: Ini biasanya berarti aplikasi Next.js Anda belum berjalan. Cek status PM2 dengan
pm2 list. Jika statusnya errored, cek log denganpm2 logs.
FAQ (Tanya Jawab Seputar Deploy Next.js)
Q: Apakah saya bisa menggunakan database lokal di VPS yang sama? A: Sangat bisa. Anda bisa menginstal PostgreSQL atau MySQL di Ubuntu yang sama. Untuk performa terbaik, pastikan Anda melakukan Membersihkan Transients Database secara rutin agar peladen tetap enteng.
Q: Berapa minimal RAM untuk menjalankan Next.js di VPS? A: Minimal 1GB RAM sudah cukup untuk trafik kecil. Namun, untuk proses build yang berat, disarankan minimal 2GB RAM atau gunakan trik Menambah Swap File Linux jika RAM Anda terbatas.
Q: Bagaimana cara memperbarui kode aplikasi? A: Cukup lakukan git pull di dalam folder proyek, jalankan npm run build ulang, lalu perintah pm2 restart next-app. Aplikasi Anda akan terupdate tanpa downtime.
Kesimpulan
Melakukan deployment aplikasi Next.js di VPS Ubuntu memang membutuhkan langkah lebih banyak dibandingkan Vercel, namun fleksibilitas dan efisiensi biaya yang Anda dapatkan sangatlah sepadan. Anda kini memiliki kendali penuh atas infrastruktur aplikasi Anda, mulai dari manajemen Node.js dengan NVM, pengelolaan proses dengan PM2, hingga pengamanan jalur trafik dengan Nginx dan SSL.
Dengan menguasai teknik deployment ini, Anda tidak hanya menjadi seorang pembuat kode, tetapi juga seorang arsitek peladen yang handal.
Apakah Anda mengalami kendala saat mengonfigurasi Nginx? Atau PM2 Anda sering berhenti mendadak? Sampaikan kendala Anda di kolom komentar, mari kita bedah kodenya bersama!
Last Updated on April 29, 2026 by larhtechBro
