Next.js 16: Geliştiriciler İçin Gerçek Güncelleme

Next.js 16 yeni yayınlandı ve bu küçük bir güncelleme değil. Turbopack'in kararlı olması, React Compiler'ın içine entegre edilmesi, nihayet akıllı bir routing ve gerçekten sorunları çözen yeni caching API'leri hakkında konuşuyoruz. Size önemli özellikleri örneklerle ve bilmeniz gereken breaking changes'leri anlatayım.

Turbopack Nihayet Kararlı Hale Geldi

Turbopack, hem geliştirme hem de production için kararlılığa ulaştı. Artık tüm uygulamalarda varsayılan bundler. Next.js 15.3+ üzerinde çalışan geliştirme oturumlarının %50'sinden fazlası ve production build'lerin %20'si zaten Turbopack üzerinde çalışıyor.

Webpack'e devam etmek istiyor musunuz? Sadece şunu çalıştırın:

next dev --webpack
next build --webpack

Turbopack ile şunları elde ediyorsunuz:

• 2-5× daha hızlı production build'ler
• 10× kata kadar daha hızlı Fast Refresh
• Sıfır yapılandırma gereksinimi

Turbopack Dosya Sistemi Önbelleği (Beta)

Turbopack artık geliştirmede dosya sistemi önbelleğini destekliyor. Bu, build artifact'lerini diskte saklayarak yeniden başlatmalar arasında önemli ölçüde daha hızlı derleme süreleri sağlıyor. Monorepo'lar için harika.

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

Vercel'deki tüm dahili uygulamalar zaten bunu kullanıyor ve kayda değer iyileştirmeler görüyorlar.

Basitleştirilmiş create-next-app

create-next-app basitleştirilmiş bir kurulum akışıyla yeniden tasarlandı. Yeni şablon varsayılan olarak App Router, TypeScript-first yapılandırma, Tailwind CSS ve ESLint içeriyor.

React Compiler Desteği (Kararlı)

React Compiler için yerleşik destek artık kararlı. useMemo veya useCallback olmadan otomatik memoization alıyorsunuz. Compiler hepsini hallediyor.

const nextConfig = {
  reactCompiler: true,
};

Compiler eklentisini yükleyin:

npm install babel-plugin-react-compiler@latest

Not: React Compiler Babel'e dayandığından daha yüksek derleme süreleri bekleyin.

Yeni Caching API'leri

Next.js 16, cache davranışı üzerinde açık kontrol için rafine edilmiş caching API'leri tanıtıyor.

revalidateTag() Artık Cache Profile'ları Gerektiriyor

revalidateTag() artık ikinci argüman olarak bir cacheLife profili gerektiriyor. Bu, tüm sayfa yerine yalnızca belirli bir sayfa bölümünün önbelleğini temizlemek istediğinizde kullanışlı.

// Çoğu durum için önerilen
revalidateTag("blog-posts", "max");

// Diğer yerleşik profiller
revalidateTag("news-feed", "hours");
revalidateTag("analytics", "days");

// Özel revalidation zamanı
revalidateTag("products", { revalidate: 3600 });

Çoğu durum için 'max' öneriyorlar. Uzun ömürlü içerik için arka plan revalidation'ı etkinleştirir. Kullanıcılar etiketli içerik talep ettiğinde, Next.js arka planda revalidate ederken önbelleğe alınmış veriyi anında alırlar.

Blog yazıları, analizler veya anında güncelleme gerektirmeyen dashboard'lar için mükemmel.

updateTag()

Server Actions-only API'si, read-your-writes semantiği sağlayarak aynı istek içinde önbelleğe alınmış verileri sona erdirir ve hemen yeniler.

"use server";
import { updateTag } from "next/cache";

export async function updateUserProfile(userId, profile) {
  await db.users.update(userId, profile);
  updateTag(user-${userId});
}

revalidateTag()'den farklı olarak bu anında gerçekleşir. Kullanıcıların mutation'lardan sonra anında geri bildirim beklediği kullanıcı ayarları, profiller, dashboard'lar için mükemmel.

refresh() Sadece Önbelleğe Alınmamış Veriler İçin

Server Actions-only API'si, yalnızca önbelleğe alınmamış verileri yenilemek içindir. Önbelleğe hiç dokunmaz.

"use server";
import { refresh } from "next/cache";

export async function markNotificationAsRead(notificationId) {
  await db.notifications.markAsRead(notificationId);
  refresh();
}

Bildirim rozetleri, sepet sayıları, canlı metrikler için bunu kullanın. Statik kabuğunuz hızlı kalırken dinamik parçalar güncellenir.

Bu, istemci tarafı router.refresh() fonksiyonuna tamamlayıcıdır.

Build Adapters API (Alpha)

Kendi altyapınıza dağıtım için build sürecine bağlanan özel adaptörler oluşturun.

const nextConfig = {
  experimental: {
    adapterPath: require.resolve("./my-adapter.js"),
  },
};

Cloudflare Workers'a dağıtın, asset'leri S3'e yükleyin veya dahili platformunuzu kullanın. Next.js gerçekten modüler hale geliyor.

Geliştirilmiş Routing ve Navigasyon

Routing sisteminin tamamen elden geçmesi. Sayfa geçişleri artık daha yalın ve daha hızlı.

Layout Deduplication: Paylaşılan bir layout ile birden fazla URL prefetch edilirken, layout her link için ayrı ayrı yerine bir kez indirilir. 50 ürün linki olan bir sayfa artık paylaşılan layout'u 50 kez yerine bir kez indiriyor.

Incremental Prefetching: Next.js yalnızca önbellekte olmayan parçaları prefetch ediyor. Prefetch önbelleği artık linkler viewport'tan çıktığında istekleri iptal ediyor, hover'da prefetch'e öncelik veriyor ve veriler geçersiz kılındığında yeniden prefetch ediyor. Cache Components ile sorunsuz çalışıyor.

Trade-off: Daha fazla bireysel istek, ancak çok daha düşük toplam transfer boyutları. Kod değişikliği gerekmiyor.

Cache Components ve PPR

Next.js 16, deneysel PPR flag'ini kaldırıyor. PPR, Cache Components'e entegre ediliyor.

const nextConfig = {
  experimental: {
    cacheComponents: true,
  },
};

Partial Pre-Rendering önce statik içeriğinizi yükler ve dinamik içerik stream edilir. Cache Components ile neyin önbelleğe alınacağını ve neyin alınmayacağını otomatik olarak anlayabiliyor. Next.js Conf'tan önce daha fazla detay gelecek.

Önemli: experimental.ppr = true kullanıyorsanız, mevcut Next.js canary versiyonunuzda kalın. Kararlı sürümden önce migration rehberi gelecek.

React 19.2 Entegrasyonu

Next.js 16, React 19.2 özellikleriyle en son React Canary sürümünü kullanıyor:

• View Transitions: Transition veya navigasyon içinde güncellenen öğeleri canlandırın
• useEffectEvent(): Effect'lerden reaktif olmayan mantığı yeniden kullanılabilir Effect Event fonksiyonlarına çıkarın
• : UI'yi display: none ile gizleyerek state'i korurken "arka plan aktivitesini" render edin

Breaking Changes

Versiyon Gereksinimleri

• Node.js 20.9+ (Node.js 18 artık desteklenmiyor)
• TypeScript 5.1.0+
• Tarayıcılar: Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+

Önemli Kaldırmalar

• AMP desteği tamamen kaldırıldı
• next lint komutu kaldırıldı (ESLint'i doğrudan kullanın, codemod mevcut: npx @next/codemod@canary next-lint-to-eslint-cli)
• Runtime config'leri kaldırıldı (.env dosyalarını kullanın)
• experimental.ppr flag'i kaldırıldı (experimental.cacheComponents kullanın)
• params, searchParams, cookies, headers, draftMode'a senkron erişim artık await gerektiriyor
• next/image local src'si query string'leriyle artık images.localPatterns config gerektiriyor

Davranış Değişiklikleri

• Turbopack varsayılan (--webpack ile devre dışı bırak)
• images.minimumCacheTTL: 60 saniyeden 4 saate (14400s) değişti
• images.imageSizes: Varsayılan boyutlardan 16 kaldırıldı
• images.qualities: [1..100]'den [75]'e değişti
• images.dangerouslyAllowLocalIP: Varsayılan olarak yerel IP optimizasyonunu engelliyor
• images.maximumRedirects: Sınırsızdan maksimum 3'e değişti
• revalidateTag(): Artık ikinci argüman olarak cacheLife profili gerektiriyor
• Parallel routes: Tüm slot'lar artık açık default.js dosyaları gerektiriyor
• Dev ve build: Artık ayrı çıktı dizinleri kullanıyor
• Terminal çıktısı: Daha net formatlama ile yeniden tasarlandı
• Turbopack'te Babel: Config bulunursa otomatik etkinleşir
• Modern Sass API: sass-loader v16'ya yükseltildi

Deprecation'lar

• middleware.ts: Network boundary ve routing odağını netleştirmek için proxy.ts olarak yeniden adlandırın
• next/legacy/image: Bunun yerine next/image kullanın
• images.domains: Bunun yerine images.remotePatterns kullanın
• revalidateTag() tek argüman: İki argümanlı formu veya updateTag() kullanın

Ek İyileştirmeler

• next dev ve next start komutları için performans optimizasyonları
• --experimental-next-config-strip-types flag'i ile next.config.ts için Node.js native TypeScript desteği

Son Düşünceler

Next.js 16, hayat kalitesi özellikleriyle dolu. Yeni caching API'leri gerçek sorunları çözüyor, routing anında hissettiriyor ve Turbopack herkese performans kazanımları getiriyor. İki hafta içinde Next.js Conf'tan önce daha fazla özellik geliyor.

Next.js 16, framework'ün olgunlaşma sürecinde önemli bir adım. Turbopack'in kararlı hale gelmesi, React Compiler desteği ve yeni caching stratejileri ile geliştiricilere daha fazla kontrol ve performans sunuyor.

Özellikle yeni caching API'leri (revalidateTag, updateTag, refresh) farklı kullanım senaryoları için optimize edilmiş çözümler sunuyor. Bu, uygulamalarınızın performansını ince ayar yapmanıza olanak tanıyor.

Breaking changes'ler önemli olsa da, Next.js ekibi migration için gerekli araçları (codemod'lar) sağlıyor. Eğer büyük bir Next.js projeniz varsa, güncelleme öncesi test ortamında kapsamlı testler yapmanız önerilir.

Next.js Conf öncesinde daha fazla özellik duyurusu bekleniyor. Framework'ün geleceği parlak görünüyor ve geliştiriciler için sürekli iyileştirmeler devam ediyor.