Static export Next.js

Deploy
website statis Next.js

Ekspor aplikasi Next.js menjadi HTML dan asset statis, unggah direktori out, dan publikasikan secara global tanpa menjalankan server Node.js.

Lihat panduan setup
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
Static export aktif

Matriks dukungan static export

Sebelum mengunggah out, pastikan app cocok dengan model static export.

Cocok

  • Route statis yang dibuat saat build
  • Halaman App Router yang bisa dirender statis
  • Pages Router getStaticProps / getStaticPaths
  • Client-side data fetching setelah hidrasi
  • next/link, dynamic import, CSS Modules, dan asset statis

Butuh runtime lain

  • API route dan route handler yang butuh eksekusi server
  • Middleware, rewrite, redirect, dan custom header
  • getServerSideProps dan render saat request
  • Incremental Static Regeneration
  • Optimasi next/image default tanpa strategi statis custom

Gunakan Next.js saat Anda butuh framework, bukan server

Pertahankan framework, lepaskan server

Static export Next.js memungkinkan Anda tetap memakai file-based routing, layout, metadata, build-time rendering, dukungan CSS, dan React client-side saat dibutuhkan.

Output akhirnya tetap file. Itu cocok untuk website marketing, docs, portofolio, halaman produk, content hub, dan halaman lain yang bisa disiapkan saat build.

Cepat seperti asset statis

HTML yang sudah diprerender bisa dicache agresif dan dilayani langsung dari lokasi jaringan tanpa menunggu render server.

Ops lebih ringan

Tanpa runtime Node berarti lebih sedikit bagian bergerak, artefak deployment lebih sederhana, dan drift produksi antar build lebih kecil.

Batas runtime jelas

Jika halaman butuh kode server, jangan dipaksa masuk static export. Jika bisa dibangun lebih dulu, direktori out adalah artefak bersih untuk dipublikasikan.

Penghalang umum static export

Blocker 01

Build gagal karena fitur server-only

Hapus API berbasis request dari route yang diekspor, pindahkan ke backend terpisah, atau deploy bagian itu di platform yang mendukung server.

Blocker 02

Gambar bekerja di development tetapi gagal setelah export

Optimizer next/image default mengharapkan server. Gunakan images.unoptimized, custom loader, atau asset gambar statis biasa.

Blocker 03

Dynamic route hilang

Generate daftar route saat build dengan generateStaticParams di App Router atau getStaticPaths di Pages Router.

Blocker 04

Redirect atau rewrite tidak berlaku

Redirect dan rewrite Next.js bukan bagian dari static export. Gunakan struktur halaman statis, navigasi client-side, atau redirect level platform jika tersedia.

Checklist static export Next.js

01

Set output: 'export'

Minta Next.js mengeluarkan HTML statis saat build, bukan mengharapkan next start atau runtime Node yang di-host.

output: 'export'
02

Build dan verifikasi /out

Jalankan production build dan pastikan direktori out berisi halaman render, asset, halaman 404, dan file statis yang ingin dipublikasikan.

npm run build
03

Unggah dan uji route

Unggah direktori out, lalu validasi nested path, asset statis, dan gambar unoptimized di website deploy.

FAQ deployment Next.js

Kenapa komponen Next.js Image gagal setelah export?

Pipeline optimasi Image default mengharapkan server. Untuk static export, set images.unoptimized ke true di next.config.js.

Apakah API route atau getServerSideProps bekerja di sini?

Tidak. Static export menghapus fitur runtime server-side seperti API route, middleware, dan getServerSideProps. Pindahkan logika itu ke backend atau layanan serverless terpisah.

Bisakah memakai App Router?

Bisa, selama route bisa dirender statis dan tidak bergantung pada API server-only dinamis seperti headers atau cookies.

Bagaimana menangani konten dinamis?

Ambil saat build jika memungkinkan, atau muat client-side setelah halaman terhidrasi. Static export paling cocok saat HTML bisa disiapkan lebih dulu.

Haruskah saya mengunggah .next atau out?

Unggah out untuk output: 'export'. Direktori .next adalah direktori build internal Next.js, bukan artefak static export yang ingin Anda publikasikan.

Apakah ini pengganti hosting Next.js Vercel?

Ini cocok untuk static export, bukan semua aplikasi Next.js. Jika Anda memakai SSR, middleware, ISR, server actions, atau API route, Anda perlu runtime yang mendukung fitur tersebut.