Dokumentasi Deploy Framework Next.js

Cara Hosting Aplikasi Next.js (SSR & API Routes)

Hostifame mendukung penuh ekosistem Server-Side Rendering (SSR) Next.js. Aplikasi Anda tidak hanya dijadikan web statis biasa, melainkan dijalankan secara aktif sebagai Service Node.js mandiri di latar belakang menggunakan PM2 Process Manager, lengkap dengan proteksi isolasi antar pengguna.

1. Persiapkan File Proyek (.ZIP) & Aturan Wajib

Untuk memastikan proses upload berjalan sangat cepat dan tidak mengalami kegagalan (timeout), Anda hanya perlu mengunggah Source Code murni dari proyek Next.js Anda.

Benar & Cepat

Apa yang Harus Di-ZIP?

Kompres seluruh file kodingan proyek Anda seperti folder src, public, prisma, serta file konfigurasi seperti package.json dan next.config.js.

Ukuran Ringan: Tanpa folder build dan dependensi, ukuran file ZIP Anda umumnya hanya sekitar 2 - 5 MB sehingga upload selesai dalam hitungan detik!

Dilarang Keras

Jangan Sertakan Folder Ini!

Pastikan Anda TIDAK MENGIKUTSERTAKAN kedua folder di bawah ini ke dalam file .ZIP Anda:

❌ /node_modules (Ratusan megabyte library)
❌ /.next (Folder hasil build lokal)

Menyertakan folder ini akan membuat file ZIP bengkak hingga ratusan MB dan menyebabkan upload gagal.

2. Integrasi Database Pintar (.env.local & ORM)

Saat Anda mengisi formulir Informasi Database MySQL pada saat membuat proyek, sistem Hostifame tidak hanya menyiapkan database saja. Kami juga akan menyuntikkan file .env.local secara otomatis yang siap dibaca oleh ORM seperti Prisma, Drizzle ORM, TypeORM, maupun Sequelize.

.env.local (Otomatis Dibuat oleh Sistem Hostifame)

# Kredensial ini otomatis disuntikkan oleh Hostifame jika Anda mengisi form Database
DATABASE_HOST="127.0.0.1"
DATABASE_PORT="3306"
DATABASE_USER="usr_nextjs"
DATABASE_PASSWORD="SandiRahasia123!"
DATABASE_NAME="db_nextjs"

# String URL siap pakai untuk Prisma ORM / Drizzle / MySQL Driver:
DATABASE_URL="mysql://usr_nextjs:SandiRahasia123!@127.0.0.1:3306/db_nextjs"

Tips Khusus Pengguna Prisma ORM

Pastikan pada file prisma/schema.prisma Anda, bagian provider diatur menggunakan MySQL (provider = "mysql"). Mesin kami secara cerdas akan mendeteksi Prisma, melakukan npx prisma generate, dan menyinkronkan tabel ke database secara otomatis saat proses deploy pertama kali!

3. Sihir Otomatisasi (Di Belakang Layar)

Karena Anda hanya mengupload kodingan mentah, setelah Anda mengklik Deploy, sistem Hostifame akan mengambil alih seluruh tugas berat pembuatan aplikasi di server:

Auto Install & Build

Mengunduh dependensi (npm install) dan merakit aplikasi (npm run build) di server dengan proteksi batas memori RAM.

PM2 Process Manager

Aplikasi berjalan pada port internal dinamis yang diikat permanen (-p PORT) dan dilindungi sistem auto-restart 24/7.

Nginx Reverse Proxy

Nginx otomatis menyalurkan trafik dari domain publik Anda ke service Node.js lokal dengan dukungan WebSocket dan SSL gratis.

Dukungan Fitur Penuh (Tanpa Batasan)

Karena menggunakan arsitektur Node.js murni, Anda bebas menggunakan seluruh fitur canggih Next.js! Mulai dari API Routes (/app/api), Server Actions, Middleware, hingga komponen next/image akan berjalan sempurna tanpa perlu mematikan optimasi gambar.

4. Mengelola Proyek & Panduan Tombol Cepat (Quick Actions)

Di halaman detail proyek Anda, terdapat fitur Quick Actions dengan empat tombol otomatis yang berfungsi untuk mempermudah perawatan aplikasi Next.js Anda tanpa perlu mengetikkan perintah di terminal:

1. NPM Install

Mengunduh atau memperbarui library baru jika Anda menambahkan dependensi baru di package.json.

npm install

2. NPM Build

Merakit ulang kode aplikasi Anda ke dalam folder .next. Wajib ditekan setelah Anda selesai mengedit kodingan atau file proyek lewat File Manager.

npm run build

3. Migrate DB (Universal ORM)

Menyinkronkan skema tabel ke MySQL secara otomatis (mendukung script db:push, Prisma ORM, dan Drizzle ORM).

auto migrate / push

4. Restart App (PM2 Service)

Menghidupkan ulang aplikasi latar belakang agar perombakan kode dari NPM Build atau penambahan variabel .env.local baru segera aktif.

pm2 restart --update-env

Peringatan: Mengatasi Error 502 Bad Gateway

Jika website Anda menampilkan halaman 502 Bad Gateway setelah melakukan pengeditan kode atau perubahan environment, jangan khawatir! Hal itu normal terjadi dalam ekosistem Server-Side Rendering.

Solusinya sangat mudah: Klik tombol NPM Build tunggu hingga muncul pesan keramat "Compiled successfully", lalu klik tombol Restart App. Website Anda akan langsung terbuka kembali dengan lancar!

Sebelumnya Dokumentasi Vue.js Selanjutnya Akses phpMyAdmin