Next.js 16 Yenilikleri: Turbopack Stable, Cache 2 ve Async Params

Geçen hafta bir müşterim, doktorbul.com için yaptığımız 79.000 doktor profili sayfasının build süresinin 40 dakikayı bulduğunu söyledi. Webpack bundler'ı terletiyordu resmen. Tam o sırada Next.js 16 çıktı ve Turbopack stable oldu. Build süresi 6 dakikaya düştü. Ama asıl mesele sadece hız değil: Next.js 16, cache mekanizmasını tamamen yeniden yazdı, async params ile route handling'i modernleştirdi ve production ortamlarında ciddi performans kazançları getirdi. Bu yazıda, Next.js 16'nın gerçek dünya projelerinde nasıl kullanıldığını, hangi senaryolarda işe yaradığını ve hangi durumlarda dikkatli olmak gerektiğini anlatacağım. Vercel'in pazarlama broşürlerinde görmeyeceğiniz, kod yazan birinin gözünden. Next.js 16, Ekim 2024'te beta olarak çıktı ve Aralık 2024'te stable'a geçti. Vercel ekibi, özellikle büyük ölçekli uygulamalarda yaşanan build ve runtime performans sorunlarını hedef almış. Ben de FUTIA'da, Türk markalarına yaptığımız yapay zeka destekli sitelerde bu sürümü test ettim. Sonuç: bazı projeler için oyun değiştirici, bazıları için gereksiz karmaşıklık. Detaylara girelim. ## Turbopack Stable: Webpack'ten 7 Kat Hızlı mı Gerçekten? Turbopack, Rust ile yazılmış yeni nesil bir bundler. Next.js 15'te deneysel olarak gelmişti, 16 ile birlikte production-ready ilan edildi. Vercel'in iddiası: Webpack'ten 700 kat hızlı hot reload, 5 kat hızlı build. Gerçek dünya testlerimde bu rakamlar biraz abartılı çıktı ama yine de ciddi kazançlar var. doktorbul.com projesinde, 79.000 dinamik route'u olan bir Next.js 14 uygulaması vardı. Her doktor profili ayrı bir sayfa: /doktor/istanbul/diş-hekimi/ahmet-yilmaz gibi. Webpack ile production build süresi 38-42 dakika arasında değişiyordu. Turbopack'e geçtiğimizde bu süre 6 dakikaya düştü. Yani yaklaşık 6.5 kat hızlanma. 700 kat değil ama yine de muazzam. Hot reload tarafında ise gerçekten çarpıcı. Geliştirme sırasında bir component'te değişiklik yaptığınızda, sayfanın yeniden yüklenmesi Webpack'te 2-3 saniye sürerken, Turbopack'te 200-400 milisaniye arası. Bu, günde 100 kere kod değiştirdiğinizde saatlerce zaman kazandırıyor. Ancak Turbopack'in bazı sınırlamaları var. Özellikle custom Webpack loader'ları kullanan projeler için sorun çıkabiliyor. Örneğin, italyanmutfagi.com projesinde, tarif içeriklerini Markdown'dan HTML'e çevirmek için custom bir loader kullanıyorduk. Turbopack'e geçerken bu loader'ı yeniden yazmak zorunda kaldık. Rust ile uyumlu alternatif bulmak veya JavaScript fallback kullanmak gerekti. Turbopack'i aktif etmek için next.config.js dosyanıza şunu eklemeniz yeterli: ```javascript module.exports = { experimental: { turbo: { // Artık experimental değil, direkt aktif } } }

- 10.000-50.000 sayfa: Turbopack 3-4 kat daha hızlı
- 50.000+ sayfa: Turbopack 5-7 kat daha hızlı
- Hot reload: Her durumda 5-10 kat hızlanma Yani küçük projelerde Turbopack'e geçmek için acele etmeyin. Ama programatik SEO yapıyorsanız, binlerce sayfa üretiyorsanız, mutlaka geçin. ## Cache 2: Next.js'in Yeni Cache Sistemi Next.js 16'nın en tartışmalı özelliği Cache 2 sistemi. Eskiden Next.js, fetch isteklerini otomatik olarak cache'lerdi. Bu, bazı durumlarda beklenmedik sonuçlar doğuruyordu. Özellikle dinamik içerik üreten sitelerde, kullanıcılar eski veriyi görüyordu. Cache 2 ile birlikte, Next.js cache davranışını tamamen değiştirdi: - Fetch istekleri artık default olarak cache'lenmiyor
- Cache'lemek istiyorsanız, explicit olarak belirtmeniz gerekiyor
- Revalidation mekanizması daha granüler hale geldi Bu değişiklik, özellikle Server Components kullanan projeler için kritik. memuratamalari.com projesinde, kamu ilanlarını ilan.gov.tr API'sinden çekiyoruz. Her gün 50+ yeni ilan ekleniyor. Eski cache sistemiyle, bazen ilanlar 5-10 dakika gecikmeli görünüyordu. Cache 2 ile birlikte, fetch isteğine `cache: 'no-store'` ekleyerek sorunu çözdük: ```javascript
async function getLatestIlanlar() { const res = await fetch('https://ilan.gov.tr/api/ilanlar', { cache: 'no-store' // Her istekte fresh data }); return res.json();
}

async function getStaticContent() { const res = await fetch('https://api.example.com/content', { next: { revalidate: 3600 } // 1 saat cache }); return res.json(); }

- Stok bilgisi: Cache yok (cache: 'no-store')
- Yorumlar: 1 saat cache (revalidate: 3600) Bu yaklaşım, hem performansı korudu hem de güncel veri gösterimini sağladı. Sonuç: %340 6 aylık trafik büyümesi. Tabii bu sadece cache optimizasyonundan değil, ama cache stratejisi önemli bir rol oynadı. ## Async Params: Route Handling'in Modernleşmesi Next.js 16'dan önce, dynamic route parametrelerine erişmek için `useParams` hook'unu kullanıyorduk. Bu, client-side bir işlemdi ve Server Components'te kullanılamıyordu. Async params ile birlikte, route parametrelerine server-side erişim mümkün hale geldi. Eski yöntem (Next.js 15 ve öncesi): ```javascript
// app/doktor/[sehir]/[uzmanlik]/page.js
import { useParams } from 'next/navigation'; export default function DoktorPage() { const params = useParams(); const { sehir, uzmanlik } = params; // Client-side rendering gerekiyor return <div>{sehir} - {uzmanlik}</div>;
}

// app/doktor/[sehir]/[uzmanlik]/page.js export default async function DoktorPage({ params }) { const { sehir, uzmanlik } = await params; // Server-side rendering, SEO-friendly const doktorlar = await getDoktorlar(sehir, uzmanlik); return

export default async function DoktorPage({ params }) { const { sehir, uzmanlik } = await params; const validSehirler = ['istanbul', 'ankara', 'izmir']; if (!validSehirler.includes(sehir)) { notFound(); // Next.js'in built-in 404 handler'ı } const doktorlar = await getDoktorlar(sehir, uzmanlik); return <div>...</div>;
}

• Yorumlar, beğeni sayısı: Dynamic (her istekte render) PPR ile birlikte, sayfa ilk yüklendiğinde static kısım anında gösteriliyor, dynamic kısım arka planda yükleniyor. Bu, hem SEO açısından iyi (Google static içeriği görüyor) hem kullanıcı deneyimi açısından iyi (sayfa hızlı yükleniyor). PPR'yi aktif etmek için: ```javascript

// next.config.js module.exports = { experimental: { ppr: true } }

// app/tarif/[slug]/page.js
import { Suspense } from 'react'; export default async function TarifPage({ params }) { const { slug } = await params; const tarif = await getTarif(slug); // Static return ( <div> <h1>{tarif.baslik}</h1> <div>{tarif.malzemeler}</div> <Suspense fallback={<div>Yorumlar yükleniyor...</div>}> <Yorumlar tarifId={tarif.id} /> {/* Dynamic */} </Suspense> </div> );
}

// app/bildirim/page.js import { revalidatePath } from 'next/cache'; async function kaydetBildirim(formData) { 'use server'; const email = formData.get('email'); const kategori = formData.get('kategori'); await db.bildirimler.create({ email, kategori, createdAt: new Date() }); revalidatePath('/bildirim'); } export default function BildirimPage() { return (

- Daha iyi type safety (TypeScript ile)
- Otomatik CSRF koruması
- Progressive enhancement (JavaScript olmasa bile form çalışıyor) Server Actions, özellikle form-heavy uygulamalarda işleri çok kolaylaştırıyor. diolivo.com.tr'de, sepet kurtarma formlarını Server Actions ile yaptık. Sonuç: %18 daha yüksek form tamamlama oranı. ## Next.js 16'ya Geçiş Stratejisi Next.js 16'ya geçmek, her proje için aynı öncelikte değil. FUTIA'da, müşteri projelerini şu kriterlere göre değerlendiriyoruz: 1. Proje büyüklüğü: 10.000+ sayfa varsa, Turbopack için geçin
2. Cache ihtiyacı: Dinamik içerik ağırlıklıysa, Cache 2 için geçin
3. SEO önceliği: Programatik SEO yapıyorsanız, async params için geçin
4. Geliştirme hızı: Sık kod değişikliği yapıyorsanız, hot reload için geçin memuratamalari.com projesinde, Next.js 14'ten 16'ya geçiş 3 günde tamamlandı. Ana değişiklikler: - Tüm fetch isteklerine cache stratejisi eklendi
- Dynamic route'lar async params'a geçirildi
- Custom Webpack loader'ı Turbopack uyumlu hale getirildi Sonuç: Build süresi 12 dakikadan 3 dakikaya düştü, hot reload 10 kat hızlandı, Google index süresi yarıya indi. Ancak bazı projeler için geçiş mantıklı olmayabilir. Örneğin, 5.000'den az sayfası olan, içeriği çok sık değişmeyen bir blog sitesi için Next.js 16'ya geçmek gereksiz karmaşıklık yaratabilir. ### Geçiş Sırasında Dikkat Edilmesi Gerekenler - Custom Webpack plugin'leri: Turbopack ile uyumlu mu kontrol edin
- Üçüncü parti kütüphaneler: Next.js 16 ile uyumlu mu test edin
- Cache stratejisi: Tüm fetch isteklerini gözden geçirin
- Environment variables: Bazı değişkenler farklı davranabilir
- API route'lar: Server Actions'a geçmeyi düşünün FUTIA'da, geçiş öncesi mutlaka staging ortamında 1-2 hafta test ediyoruz. Production'a geçmeden önce, tüm kritik akışları manuel olarak test ediyoruz. ## FUTIA'da Next.js 16 ile Neler Yapıyoruz? Ben FUTIA'yı kurarken, Türk markalarına sadece site yapmak değil, yapay zeka destekli otomasyon sistemleri kurmak istedim. Next.js 16, bu vizyonu gerçekleştirmek için mükemmel bir temel sağlıyor. Örneğin, futia.net sitesinin kendisi Next.js 16 ile çalışıyor. 3 ayda 2000+ video içerik ürettik, hepsi programatik SEO ile. Turbopack sayesinde, her video sayfası build'i 50 milisaniye sürüyor. Cache 2 sayesinde, video metadata'sı her 5 dakikada bir güncelleniyor. Async params sayesinde, Google her video sayfasını tam render edilmiş haliyle görüyor. Bir diğer örnek: doktorbul.com için yaptığımız Claude Haiku entegrasyonu. Kullanıcılar, doktor aramak için doğal dilde soru sorabiliyor: "Kadıköy'de iyi bir çocuk doktoru önerir misin?". Claude Haiku, bu soruyu parse ediyor, ilgili filtreleri uyguluyor ve sonuçları döndürüyor. Tüm bu işlem, Next.js 16'nın Server Actions özelliği ile yapılıyor. Ortalama yanıt süresi 800 milisaniye. Bu tür otomasyonları, Next.js 16 öncesinde yapmak çok daha zordu. Server Actions olmadan, her otomasyon için ayrı API route yazmak gerekiyordu. Cache 2 olmadan, Claude yanıtlarını cache'lemek karmaşıktı. Turbopack olmadan, 79.000 sayfa build etmek saatler alıyordu. Eğer siz de yapay zeka destekli, programatik SEO yapan, binlerce sayfa üreten bir proje düşünüyorsanız, Next.js 16 şu an piyasadaki en iyi seçenek. FUTIA olarak, Hollanda'dan Türk markalarına bu tür sistemler kuruyoruz: site, otomasyon, aylık bakım, hepsi dahil. Detaylı konuşmak isterseniz yazabilirsiniz:. Ya da e-posta: info@futia.net.