Hosting ekspor statis Next.js: deploy out/ dalam detik

Q: Mengapa gambar next/image saya rusak setelah ekspor?

Loader gambar bawaan memerlukan server. Tambahkan images: { unoptimized: true } ke next.config.js, atau setel loader kustom yang mengarah ke CDN gambar, dan build lagi.

Q: Apakah halaman 404 Next.js saya berfungsi?

Ya. next build menulis 404.html dari halaman not-found (App Router) atau pages/404 (Pages Router), dan Lobsite menyajikannya untuk alamat yang tidak ada.

Next.js dapat membuat situs yang tidak memerlukan server: setel output: "export" dan next build menulis setiap halaman sebagai HTML ke out/. Lobsite meng-host folder itu. Jalankan npm run build, lalu npx lobsite, dan situs aktif di alamat *.lobsite.app dengan HTTPS. Agar jelas sejak awal: halaman ini membahas ekspor statis. Render server, rute API, dan middleware memerlukan host Node.js seperti Vercel.

Cara kerjanya

Aktifkan ekspor statis di next.config.js dengan output: "export" (lihat di bawah), lalu jalankan npm run build. Situs masuk ke out/.
Jalankan npx lobsite di proyek. Perintah ini melakukan deploy out/, bukan public/ atau .next/. Deploy pertama tidak memerlukan akun dan bertahan 6 jam.
Simpan dengan tautan klaim, di akun gratis. Setelah itu, setiap npm run build && npx lobsite memperbarui alamat yang sama.

next.config.js untuk ekspor statis

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

output: "export" membuat next build menulis out/. Perintah lama next export sudah hilang sejak Next.js 14; pengaturan ini menggantikannya.
images: { unoptimized: true } diperlukan jika Anda memakai next/image: loader bawaan mengubah ukuran gambar di server per permintaan. Dengan ini, gambar disajikan apa adanya; ubah ukurannya sebelum build, atau gunakan loader kustom.
trailingSlash dapat tetap nonaktif. Halaman ditulis sebagai about.html, dan Lobsite menyajikannya di /about.

Yang tidak dapat dilakukan ekspor statis

Dokumentasi Next.js mencantumkan fitur yang memerlukan server. Yang paling sering ditemui:

Rute API dan Route Handler selain GET statis. Kirim formulir ke /_lobsite/forms/contact; lihat formulir.
redirects, rewrites, dan headers di next.config. Pindahkan pengalihan dan header ke lobsite.toml, tempat keduanya berlaku untuk setiap permintaan; Generator Pengalihan menulis aturannya.
Middleware, Server Actions, ISR, dan cookies() atau headers() di halaman.
Rute dinamis tanpa generateStaticParams: setiap halaman harus diketahui saat build.

Jika aplikasi Anda mengandalkan hal ini, itu bukan situs statis, dan host yang menjalankan Next.js di server adalah pilihan yang tepat.

Hanya file yang berubah yang diunggah

File disimpan berdasarkan hash-nya. Deploy ulang situs yang tidak berubah mengunggah 0 byte.

Setiap deploy mendapat URL

Pratinjau sebelum tayang. Rollback dengan satu klik, termasuk pengalihan.

HTTPS di mana-mana

Setiap situs mendapat alamat *.lobsite.app dengan HTTPS sejak deploy pertama.

Formulir yang langsung berfungsi

Arahkan formulir ke /_lobsite/forms/contact. Termasuk penyaringan spam.

Konfigurasi dalam satu file

Pengalihan, header, dan formulir ada di lobsite.toml dan ikut bersama setiap deploy.

Batas yang dapat Anda baca

Setiap batas dipublikasikan, dan setiap error memberi tahu langkah selanjutnya.

Perbandingan host Next.js

	Lobsite	Vercel	Netlify	GitHub Pages
Ekspor statis (`output: "export"`)	Ya	Ya	Ya	Ya
Render server, rute API, middleware	Tidak	Ya	Ya	Tidak
Build di server	Tidak: Anda deploy `out/`	Ya	Ya	Di GitHub Actions
Akun sebelum deploy pertama	Tidak: aktif 6 jam, lalu simpan gratis	Ya	Ya	Ya, dan repositori
Formulir tanpa backend	Ya, setelah situs ada di akun	Tidak	Ya	Tidak
Domain kustom	Ya, gratis	Ya	Ya	Ya

Vercel membuat Next.js dan menjalankan semuanya. Untuk situs pemasaran, blog, atau dokumentasi yang dibuat sebagai ekspor statis, Lobsite adalah host yang lebih sederhana: satu perintah, hanya file berubah yang diunggah, URL pratinjau untuk setiap deploy.

Pertanyaan umum

Bisakah saya meng-host aplikasi Next.js dengan render sisi server di sini?

Tidak. Lobsite menyajikan file, jadi hanya ekspor statis yang berfungsi. Jika halaman memakai getServerSideProps, Server Actions, atau render dinamis, host di tempat Next.js berjalan di server.

Mengapa gambar next/image saya rusak setelah ekspor?

Loader gambar bawaan memerlukan server. Tambahkan images: { unoptimized: true } ke next.config.js, atau setel loader kustom yang mengarah ke CDN gambar, dan build lagi.

Apakah halaman 404 Next.js saya berfungsi?

Ya. next build menulis 404.html dari halaman not-found (App Router) atau pages/404 (Pages Router), dan Lobsite menyajikannya untuk alamat yang tidak ada.

Bisakah saya memakai App Router dengan ekspor statis?

Ya. Server Components dirender saat build; komponen klien berjalan di browser seperti biasa. Hanya fitur yang memerlukan permintaan saat runtime yang tidak dapat digunakan.