Next.js statik export barındırma

Next.js sunucu gerektirmeyen bir site derleyebilir: output: "export" ayarlayın, next build her sayfayı HTML olarak out/ içine yazar. Lobsite bu klasörü barındırır. npm run build, ardından npx lobsite çalıştırın; site HTTPS'li bir *.lobsite.app adresinde yayına girer. Baştan netleştirelim: bu sayfa statik export'lar hakkındadır. Sunucu tarafı oluşturma, API rotaları ve middleware, Vercel gibi bir Node.js barındırması gerektirir.

Nasıl çalışır

1. Statik export'u next.config.js içinde output: "export" ile açın (aşağıya bakın), sonra npm run build çalıştırın. Site out/ içine gelir.
2. Projede npx lobsite çalıştırın. public/ veya .next/ değil, out/ klasörünü deploy eder. İlk deploy hesap gerektirmez ve 6 saat sürer.
3. Ücretsiz bir hesapta, sahiplenme bağlantısıyla koruyun. Bundan sonra her npm run build && npx lobsite aynı adresi günceller.

Statik export için next.config.js

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

module.exports = nextConfig;

• output: "export", next build komutunun out/ yazmasını sağlar. Eski next export komutu Next.js 14'ten beri yok; yerini bu ayar aldı.
• images: { unoptimized: true }, next/image kullanıyorsanız gereklidir: varsayılan yükleyici görselleri her istekte bir sunucuda yeniden boyutlandırır. Bu ayarla görseller olduğu gibi sunulur; onları derlemeden önce boyutlandırın ya da özel bir yükleyici kullanın.
• trailingSlash kapalı kalabilir. Sayfalar about.html olarak yazılır ve Lobsite onları /about adresinde sunar.

Statik export'un yapamadıkları

Next.js belgeleri sunucu gerektiren özellikleri listeler. En sık karşılaşılanlar:

• Statik GET dışındaki API rotaları ve Route Handler'lar. Formları bunun yerine /_lobsite/forms/contact adresine gönderin; bkz. formlar.
• next.config içindeki redirects, rewrites ve headers. Yönlendirmeleri ve başlıkları her isteğe uygulandıkları lobsite.toml dosyasına taşıyın; kuralları Yönlendirme Oluşturucu yazar.
• Sayfalarda Middleware, Server Actions, ISR ve cookies() veya headers().
• generateStaticParams olmadan dinamik rotalar: her sayfanın derleme sırasında bilinmesi gerekir.

Uygulamanız bunlara dayanıyorsa statik bir site değildir; Next.js'i bir sunucuda çalıştıran bir barındırma doğru seçimdir.

Next.js barındırma hizmetleri karşılaştırması

Vercel Next.js'i geliştirir ve tamamını çalıştırır. Statik export olarak derlenmiş kurumsal bir site, blog veya belge sitesi için Lobsite daha basit barındırmadır: tek komut, yalnızca değişen dosyalar yüklenir, her deploy için bir önizleme URL'si.

Sık sorulan sorular

Sunucu tarafı oluşturma kullanan bir Next.js uygulamasını burada barındırabilir miyim?

Hayır. Lobsite dosya sunar, bu yüzden yalnızca statik export çalışır. Sayfalar getServerSideProps, Server Actions veya dinamik oluşturma kullanıyorsa Next.js'in sunucuda çalıştığı bir yerde barındırın.

Export'tan sonra next/image görsellerim neden bozuk?

Varsayılan görsel yükleyici sunucu gerektirir. next.config.js dosyasına images: { unoptimized: true } ekleyin ya da bir görsel CDN'ini gösteren özel bir yükleyici ayarlayıp yeniden derleyin.

Next.js 404 sayfam çalışır mı?

Evet. next build, not-found sayfanızdan (App Router) veya pages/404 (Pages Router) dosyanızdan 404.html yazar; Lobsite onu var olmayan her adres için sunar.

App Router'ı statik export ile kullanabilir miyim?

Evet. Server Components derleme sırasında oluşturulur; istemci bileşenleri her zamanki gibi tarayıcıda çalışır. Yalnızca çalışma anında istek gerektiren özellikler kullanılamaz.