Deploy Next.js Static to cPanel

1. Konfigurasi Next.js ke Static Export

const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  }
}

export default nextConfig

output: 'export' akan mengubah Next.js menjadi HTML + CSS + JS statis

2. Build Project

Jalankan perintah berikut di local:

npm run build

Jika berhasil, akan muncul folder:

out/

Folder out ini adalah hasil website static

3. Upload ke cPanel

• masuk ke document root
• upload file .zip
• extract

4. Setting Routing (.htaccess)

Agar URL seperti /about atau /blog/post tidak 404 saat refresh:

Buat file .htaccess di public_html:

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [L]
</IfModule>

5. Jika Deploy ke Subfolder (opsional)

Jika website diakses melalui:

https://domain.com/app

Tambahkan ke next.config.mjs:

const nextConfig = {
  output: 'export',
  basePath: '/app',
  assetPrefix: '/app/',
  images: {
    unoptimized: true
  }
}

export default nextConfig

Lalu build ulang.

Penjelasan

Saat menggunakan mode static, Next.js memang tidak bisa menjalankan fitur yang butuh server, seperti API Routes, Server Actions, getServerSideProps, atau sistem login yang diproses di server. Kalau butuh backend, solusinya biasanya pakai API terpisah, misalnya Laravel API atau REST API lainnya. Tapi tenang, fitur utamanya tetap bisa dipakai seperti App Router, rendering di sisi client, static generation, dan hasil HTML yang tetap SEO-friendly. Kalau ingin tahu detail lengkap soal batasan dan fitur static export ini, kamu bisa langsung cek dokumentasi resmi Next.js