Tutorial Deploy Next JS 15 ke VPS Ubuntu 24.04: Panduan Lengkap & Optimal

Next.js 15 telah resmi dirilis dengan membawa berbagai fitur mutakhir seperti dukungan React 19, peningkatan performa caching, dan stabilisasi Turbopack. Bagi pengembang yang ingin memiliki kontrol penuh atas infrastruktur mereka, memahami tutorial deploy Next JS 15 ke VPS Ubuntu 24.04 adalah keahlian yang sangat krusial. Meskipun platform PaaS seperti Vercel menawarkan kemudahan, menggunakan Virtual Private Server (VPS) memberikan fleksibilitas biaya dan konfigurasi yang tidak tertandingi untuk aplikasi skala besar.

Dalam artikel ini, kita akan membahas secara mendalam langkah-demi-langkah cara melakukan deployment aplikasi Next.js 15 pada sistem operasi terbaru Ubuntu 24.04 LTS (Noble Numbat). Kita akan mengonfigurasi environment produksi yang aman, cepat, dan scalable menggunakan Nginx sebagai reverse proxy, PM2 sebagai process manager, dan SSL gratis dari Let’s Encrypt.

Persiapan Awal dan Prasyarat

Sebelum memulai tutorial deploy Next JS 15 ke VPS Ubuntu 24.04 ini, pastikan Anda telah menyiapkan beberapa hal berikut untuk memastikan proses berjalan lancar:

• VPS dengan Ubuntu 24.04: Anda bisa menggunakan provider seperti DigitalOcean, Linode, Vultr, atau AWS.
• Akses SSH: Pastikan Anda memiliki akses root atau user dengan hak akses sudo.
• Domain Name: Domain yang sudah diarahkan (A Record) ke IP publik VPS Anda.
• Aplikasi Next.js 15: Proyek yang sudah siap di-deploy, idealnya tersimpan di repositori Git (GitHub/GitLab).

Statistik menunjukkan bahwa penggunaan Next.js meningkat pesat di kalangan enterprise karena kemampuan SEO-nya yang superior. Dengan menggunakan VPS Ubuntu 24.04, Anda mendapatkan stabilitas jangka panjang (LTS) yang sangat dibutuhkan untuk aplikasi produksi.

Langkah 1: Update dan Upgrade Server Ubuntu 24.04

Langkah pertama dalam setiap tutorial server adalah memastikan sistem operasi berada dalam kondisi terbaru. Hal ini penting untuk keamanan dan kompatibilitas paket software.

Hubungkan ke VPS Anda melalui terminal:

ssh root@ip_address_vps_anda

Setelah masuk, jalankan perintah berikut:

sudo apt update && sudo apt upgrade -y

Perintah ini akan memperbarui daftar paket dan menginstal versi terbaru dari perangkat lunak yang ada di Ubuntu 24.04. Jika muncul prompt untuk restart layanan, pilih opsi default dan tekan Enter.

Langkah 2: Instalasi Node.js 20/22 dan NPM

Next.js 15 memerlukan Node.js versi 18.18 atau lebih tinggi. Namun, sangat disarankan untuk menggunakan Node.js 20 (LTS) atau Node.js 22 untuk performa terbaik. Kita akan menggunakan NodeSource untuk mendapatkan versi terbaru.

Eksekusi perintah berikut untuk menginstal Node.js 20:

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

Verifikasi instalasi dengan mengecek versi Node.js dan NPM:

node -v
npm -v

Tip: Jika Anda sering berganti versi Node.js, pertimbangkan untuk menggunakan NVM (Node Version Manager) agar pengelolaan versi menjadi lebih fleksibel.

Langkah 3: Menyiapkan Proyek Next.js 15

Sekarang saatnya memasukkan kode aplikasi Anda ke dalam server. Cara terbaik adalah melalui Git. Mari kita buat direktori aplikasi di folder /var/www/.

sudo mkdir -p /var/www/my-nextjs-app
sudo chown $USER:$USER /var/www/my-nextjs-app
cd /var/www/my-nextjs-app

Clone repositori Anda (ganti URL dengan milik Anda):

git clone https://github.com/username/repo-anda.git .

Setelah kode berhasil ditarik, instal dependensi dan lakukan proses building:

npm install
npm run build

Proses npm run build di Next.js 15 akan mengoptimalkan aset, melakukan pre-rendering halaman statis, dan menyiapkan aplikasi untuk mode produksi. Pastikan tidak ada error pada tahap ini.

Langkah 4: Manajemen Proses dengan PM2

Jika Anda menjalankan aplikasi dengan npm start, aplikasi akan mati segera setelah Anda menutup terminal. Di sinilah PM2 (Process Manager 2) berperan untuk menjaga aplikasi tetap berjalan di latar belakang (background).

Instal PM2 secara global:

sudo npm install -g pm2

Jalankan aplikasi Next.js Anda dengan PM2:

pm2 start npm --name "nextjs-app" -- start

Agar aplikasi otomatis berjalan kembali saat VPS melakukan reboot, jalankan perintah startup:

pm2 startup systemd
pm2 save

Dengan PM2, Anda dapat memantau penggunaan CPU dan RAM aplikasi secara real-time menggunakan perintah pm2 monit.

Langkah 5: Konfigurasi Nginx sebagai Reverse Proxy

Aplikasi Next.js Anda sekarang berjalan di port 3000. Namun, untuk akses publik, kita perlu menggunakan port 80 (HTTP) atau 443 (HTTPS). Nginx akan bertindak sebagai jembatan (reverse proxy).

Instal Nginx:

sudo apt install nginx -y

Buat file konfigurasi baru untuk domain Anda:

sudo nano /etc/nginx/sites-available/nextjs-app

Masukkan konfigurasi berikut (ganti domainanda.com dengan domain asli Anda):

server {
    listen 80;
    server_name domainanda.com www.domainanda.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;
    }
}

Aktifkan konfigurasi dan restart Nginx:

sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Langkah 6: Mengamankan Website dengan SSL Certbot

Keamanan adalah prioritas utama. Google memberikan peringkat lebih baik bagi website yang menggunakan HTTPS. Kita akan menggunakan Certbot untuk mendapatkan sertifikat SSL gratis dari Let’s Encrypt.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d domainanda.com -d www.domainanda.com

Ikuti instruksi di layar, pilih opsi untuk me-redirect semua trafik HTTP ke HTTPS. Certbot akan secara otomatis memperbarui konfigurasi Nginx Anda dan mengatur perpanjangan otomatis sertifikat setiap 90 hari.

Langkah 7: Optimasi Keamanan dan Performa VPS

Setelah tutorial deploy Next JS 15 ke VPS Ubuntu 24.04 selesai, jangan abaikan aspek keamanan server. Berikut adalah beberapa langkah tambahan yang sangat direkomendasikan:

• Konfigurasi Firewall (UFW): Hanya izinkan koneksi yang diperlukan.

  sudo ufw allow OpenSSH
  sudo ufw allow 'Nginx Full'
  sudo ufw enable

• Setup Swap File: Jika VPS Anda memiliki RAM kecil (misal 1GB), buat swap file agar server tidak crash saat proses build yang berat.

  sudo fallocate -l 2G /swapfile
  sudo chmod 600 /swapfile
  sudo mkswap /swapfile
  sudo swapon /swapfile

• Gunakan SSH Key: Matikan login password dan gunakan SSH Key untuk mencegah serangan brute force.

Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah berhasil mengikuti tutorial deploy Next JS 15 ke VPS Ubuntu 24.04 dari awal hingga akhir. Sekarang aplikasi Anda berjalan dengan performa tinggi, dikelola oleh PM2, dilindungi oleh Nginx reverse proxy, dan diamankan dengan SSL.

Langkah selanjutnya yang bisa Anda ambil adalah mengintegrasikan CI/CD (Continuous Integration / Continuous Deployment) menggunakan GitHub Actions. Dengan CI/CD, setiap kali Anda melakukan git push, server akan otomatis menarik kode terbaru, melakukan build, dan merestart PM2 tanpa campur tangan manual.

Mengelola VPS sendiri memang membutuhkan tanggung jawab lebih, namun kebebasan dan penghematan biaya yang didapatkan sangat sepadan dengan usaha yang dikeluarkan. Teruslah bereksperimen dengan fitur-fitur baru Next.js 15 seperti Partial Prerendering untuk membuat website Anda semakin kencang!