Setelah membangun aplikasi lengkap menggunakan routing, layout, form, dan integrasi API, langkah terakhir adalah membawa aplikasi ke lingkungan live agar bisa diakses publik, sekaligus memastikan performa dan SEO dalam kondisi optimal.
🎯 Tujuan Part 5
- Mempersiapkan aplikasi untuk produksi
- Deploy ke Vercel, Netlify, dan VPS
- Optimasi performa (image, preload, cache)
- Praktik SEO untuk produksi
📦 1. Build untuk Produksi
Sebelum deployment, jalankan perintah build:
npm run build
Untuk melihat hasil build:
npm start
Folder .next akan berisi file hasil kompile yang siap dideploy.
🌐 2. Deployment Otomatis ke Vercel (Rekomendasi)
Langkah:
- Push project ke GitHub
- Buka https://vercel.com
- Hubungkan akun GitHub dan pilih repositori
- Vercel otomatis mendeteksi proyek Next.js
- Klik Deploy dan tunggu build selesai
🎯 Vercel memberikan:
- CDN otomatis
- SSL gratis
- Auto preview untuk setiap branch
💾 3. Deployment Manual via VPS
Jika ingin deploy ke server sendiri (misal VPS Ubuntu), langkahnya:
a. Upload Project via Git atau FTP
Pastikan folder node_modules tidak ikut di-upload.
b. Install Node.js & PM2 di VPS
sudo apt update
sudo apt install nodejs npm
npm install -g pm2
c. Jalankan Build & Server
npm install
npm run build
pm2 start npm --name "nextapp" -- run start
d. Reverse Proxy dengan Nginx
Tambahkan config di /etc/nginx/sites-available/nextapp:
server {
listen 80;
server_name yourdomain.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:
sudo ln -s /etc/nginx/sites-available/nextapp /etc/nginx/sites-enabled
sudo systemctl restart nginx
🔍 4. Optimasi Performa Produksi
Berikut checklist optimasi Next.js:
| Optimasi | Cara Implementasi |
|---|---|
| Kompresi gambar | Gunakan <Image> dari next/image |
| Preload font & asset | Tambahkan <link rel="preload"> di <head> |
| Minify kode | Next.js sudah otomatis minify saat build |
| Lazy load komponen berat | Gunakan dynamic() dari Next.js |
| Gunakan CDN | Vercel dan Netlify sudah menyediakannya otomatis |
Contoh lazy load:
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('./HeavyComponent'));
📈 5. SEO Produksi
SEO di Next.js ditingkatkan dengan:
a. Metadata per halaman
export const metadata = {
title: 'Judul Halaman',
description: 'Deskripsi halaman ini untuk SEO',
};
b. Gunakan tag heading <h1>, <h2>, dll secara semantik
c. Gunakan gambar dengan alt
d. Sitemap & robots.txt
Gunakan plugin next-sitemap:
npm install next-sitemap
Tambahkan di next-sitemap.config.js:
module.exports = {
siteUrl: 'https://elektranetworkvision.com',
generateRobotsTxt: true,
};
🧠 Tips Tambahan
- Jangan deploy proyek development tanpa
npm run build - Gunakan
.env.productionuntuk konfigurasi khusus produksi - Monitoring runtime dengan tools seperti LogRocket, Sentry, atau Vercel Analytics
🛠️ Elektra Network Vision Siap Membantu Anda Go Live
Ingin tim ahli membantu Anda dalam:
- Setup VPS untuk Next.js
- Pengamanan dan SEO produksi
- Audit performa dan load time aplikasi
💼 Kami bantu dari build hingga deployment profesional.
🌐 elektranetworkvision.com — Mitra digital tepercaya untuk Next.js dan solusi web modern.
