Next.js'in gelişmiş özelliklerini Skyversal üzerinde hiçbir ek yapılandırma yapmadan kullanın. Image Optimization, Static Site Generation (SSG), Incremental Static Regeneration (ISR) ve Middleware desteğinin nasıl çalıştığını keşfedin.
Modern Next.js uygulamaları yalnızca React sayfalarından oluşmaz. Görselleri optimize eder, bazı sayfaları derleme sırasında statik üretir, bazılarını ise istek geldikçe oluşturur. Ayrıca gelen istekleri uygulamaya ulaşmadan önce Middleware ile işleyebilir.
Next.js bu özellikleri standart bir Node.js çalışma ortamında çalıştırır. Skyversal, bu ortamı Nixpacks build altyapısıyla birlikte otomatik olarak hazırlar. Kendi sunucunuzda (VPS) gerekebilecek Nginx ters proxy yapılandırması, PM2 süreç yöneticisi kurulumu veya ek sistem paketlerinin yönetimiyle uğraşmanıza gerek kalmaz. Siz sadece uygulamanızı geliştirirsiniz.
Hangi Mimari Bana Uygun?
Projenizin türüne göre doğru mimariyi seçmek performansı ve geliştirme deneyimini doğrudan etkiler.
| Kullanım | Önerilen Mimari | Açıklama |
|---|---|---|
| Blog | SSG | İçerik nadiren değişir, statik HTML hızlıdır |
| Dokümantasyon | SSG | Düşük güncelleme sıklığı, maksimum hız |
| Marketing Site | Static Export | Node.js bile gerekmez, CDN ile maksimum hız |
| Haber Sitesi | ISR | İçerik sık güncellenir, tam SSR'a gerek yok |
| E-Ticaret | ISR | Ürün verileri periyodik olarak güncellenir |
| Dashboard | SSR | Gerçek zamanlı veri, kullanıcıya özel içerik |
| Landing Page | Static Export | Node.js bile gerekmez, minimum gecikme |
| SaaS Paneli | SSR + Middleware | Auth, yetkilendirme ve dinamik veri bir arada |
1. Image Optimization (next/image)
next/image, Next.js'in en önemli performans özelliklerinden biridir. Skyversal üzerinde varsayılan olarak desteklenir — herhangi bir ek yapılandırma gerekmez.
Skyversal neleri otomatik yapar?
- Görselleri istenen boyutta yeniden oluşturur
- Lazy Loading desteğini korur
- Responsive Image üretir (farklı ekran boyutlarına uygun)
- Destekleyen tarayıcılarda WebP veya AVIF gibi modern formatları otomatik olarak kullanabilir
- Cache başlıklarını (Cache-Control) otomatik olarak uygular
💡 İpucu: Büyük hacimli veya yüksek çözünürlüklü görsellerle çalışıyorsanız sharp paketi görüntü işleme performansını artırabilir: npm install sharp
2. Static Site Generation (SSG)
Statik oluşturulan sayfalar build sırasında hazırlanır ve kullanıcıya hazır HTML olarak sunulur. Eğer next.config.js içerisinde output: 'export' kullanıyorsanız Skyversal uygulamanızı otomatik olarak statik site olarak algılar.
İçeriğiniz her kullanıcı için aynıysa (blog, dokümantasyon, şirket sitesi gibi), SSG genellikle en hızlı ve en düşük maliyetli seçenektir. Build sırasında oluşturulan HTML dosyaları doğrudan CDN'den sunulabilir.
Bu durumda:
- Node.js sunucusu çalıştırılmaz
- HTML dosyaları doğrudan servis edilir
- Cold start oluşmaz
- CDN üzerinden çok düşük gecikme
Bu mimari özellikle:
- Landing Page
- Blog
- Dokümantasyon
- Portfolio
- Şirket siteleri
// next.config.js
module.exports = {
output: 'export',
}3. Incremental Static Regeneration (ISR)
Bazı sayfaların her deploy sonrasında yeniden oluşturulmasını istemeyebilirsiniz. Next.js'in ISR özelliği sayesinde sayfalar belirlediğiniz süre sonunda arka planda otomatik olarak yeniden oluşturulur. ISR sayesinde içerik güncellenirken kullanıcılar eski sayfayı görmeye devam eder. Yeni sürüm arka planda oluşturulduktan sonra otomatik olarak servis edilmeye başlanır.
Bu yapıyla içeriğiniz belirlediğiniz aralıkta güncellenir, kullanıcılar her zaman güncel sayfaları görür:
// app/blog/[slug]/page.tsx
export const revalidate = 300; // 5 dakikada bir yenileSkyversal, ISR için gereken Node.js çalışma ortamını tam olarak destekler. Ek bir sunucu yapılandırması gerekmez.
4. Middleware
Middleware, istek uygulamanıza ulaşmadan önce çalışan ilk katmandır. Uygulama kodunuz çalışmadan önce devreye girdiği için yönlendirme, güvenlik ve yetkilendirme işlemleri merkezi olarak yönetilebilir. middleware.ts dosyanız otomatik olarak algılanır ve Next.js çalışma modeli korunur.
Skyversal üzerinde sorunsuz çalışan senaryolar:
// middleware.ts
import { NextResponse } from 'next/server'
export function middleware(request) {
const token = request.cookies.get('auth-token')
if (!token) {
return NextResponse.redirect(new URL('/login', request.url))
}
}5. Ne Zaman Özel Yapılandırma Gerekebilir?
Çoğu Next.js projesi hiçbir ek ayar gerektirmez. Ancak aşağıdaki senaryolarda Build & Run ayarlarını özelleştirmeniz gerekebilir:
Bu ayarlar Skyversal panelindeki Build & Run bölümünden kolayca değiştirilebilir.
Skyversal Next.js Özellik Desteği
| Özellik | Durum |
|---|---|
| App Router | ✅ Desteklenir |
| Pages Router | ✅ Desteklenir |
| next/image | ✅ Desteklenir |
| Image Optimization | ✅ Desteklenir |
| SSG | ✅ Desteklenir |
| ISR | ✅ Desteklenir |
| Middleware | ✅ Desteklenir |
| Route Handlers | ✅ Desteklenir |
| Server Actions | ✅ Desteklenir |
| Static Export | ✅ Desteklenir |
| AVIF / WebP | ✅ Desteklenir |
| Edge Runtime | 🔜 Yakında |
Sık Sorulan Sorular
Image Optimization için Sharp kurmam gerekiyor mu?
Çoğu projede gerekmez. Ancak büyük hacimli veya yüksek çözünürlüklü görsellerle çalışıyorsanız npm install sharp komutuyla eklemeniz görüntü işleme performansını artırabilir. Skyversal, Sharp'ı otomatik olarak tanır.
ISR destekleniyor mu?
Evet. revalidate kullanan Next.js projeleri Skyversal üzerinde tam olarak desteklenir. Ek bir yapılandırma gerekmez.
output: "export" kullandığımda Node.js çalışıyor mu?
Hayır. Statik dışa aktarma yapılan projelerde Node.js uygulaması yerine oluşturulan statik dosyalar yayınlanır. Bu sayede daha hızlı yükleme süreleri ve daha düşük kaynak tüketimi elde edilir.
Middleware Authentication çalışır mı?
Evet. middleware.ts dosyanız otomatik olarak algılanır ve çalıştırılır. JWT doğrulama, cookie kontrolü ve oturum yönetimi gibi senaryolar herhangi bir ek yapılandırma gerektirmez.
Her Şey Hazır!
Artık Next.js'in en güçlü özelliklerini Skyversal üzerinde güvenle kullanabilirsiniz. Image Optimization'dan Middleware'e, SSG'den ISR'a kadar gelişmiş Next.js özellikleri ek yapılandırma gerektirmeden desteklenir.