Next.js 16.3: Ücretsiz Gelenler ve Taşıma Gerektirenler

Next.js 16.3, 3 Ağustos'ta yayınlandı. Ekip bu sürümü, geçen Kasım'da çıkan 16.0'dan bu yana framework'e gelen en büyük güncelleme olarak tanımlıyor. Duyuru yazısı net bir şekilde ikiye ayrılıyor: mevcut her projenin sürümü yükselterek elde ettiği iyileştirmeler ve gerçek bir taşıma çalışması gerektiren, isteğe bağlı Instant Navigations özellikleri. Bir ekip lideri için planlamanın asıl sorusu da bu ayrım.

Sürümü yükseltince neler geliyor#

Öne çıkan rakam dev ortamındaki bellek kullanımı. Turbopack artık next dev sırasında %90'a kadar daha az bellek kullanıyor, çünkü iki özellik varsayılan olarak açık geliyor: dev için disk önbelleği (16.1'de gelmişti) ve bellek tahliyesi (memory eviction). Verdikleri örnek vercel.com dashboard'u: 50 route derlendikten sonra bellek kullanımı 21.5 GB'tan 2 GB'a iniyor.

Aynı disk önbelleği artık next build için de geçerli ve varsayılan olarak açık. Vercel, bazı projelerinde CI üzerinde 5.5 kat daha hızlı build aldıklarını söylüyor. Önemli olan detay ifadenin içinde saklı: tekrarlanan build'ler, değişmemiş çıktıları önbellekten yeniden kullanıyor. Pipeline'ınız her çalıştırmada temiz bir workspace ile başlıyorsa, bu önbellek çalıştırmalar arasında korunana kadar muhtemelen bu kazancı görmeyeceksiniz.

Uygulama koduna dokunmadan gelen iki değişiklik daha var:

• App Router'ın render katmanı artık web stream'leri yerine native Node.js stream'lerini kullanıyor. Bu da server-side rendering sırasındaki dönüşüm maliyetini ortadan kaldırıyor. Kendi benchmark'larında uygulamalar yük altında %22'ye kadar daha fazla istek karşılıyor.
• next build, tip kontrolü için geçen ay yayınlanan native port olan TypeScript 7'yi kullanabiliyor. Yerel bağımlılığı yükseltmek yeterli: pnpm add -D typescript@^7.

Benim için en önemli olan stream değişikliği. Next.js'i nginx ve systemd arkasında bir VPS üzerinde kendim host ediyorum; orada süreç başına daha fazla istek, aynı makinenin daha uzun süre yetmesi demek.

Agent'lar artık sürümünüze uygun dokümanları okuyor#

En ilginç değişiklik bir performans rakamı değil. next dev çalıştırıldığında artık AGENTS.md dosyasına, kodlama agent'larına eğitim verilerine güvenmek yerine kod yazmadan önce node_modules/next/dist/docs/ altındaki paketlenmiş dokümanları okumalarını söyleyen, yönetilen bir blok yazılıyor. Daha önce yayınlanan 16.3 AI iyileştirmeleri yazısı detayları veriyor: blok yalnızca next dev bir AI kodlama agent'ı tespit ettiğinde ve işaretçiler eksik olduğunda yazılıyor, nextjs-agent-rules işaretçilerinin dışındaki içerik korunuyor ve next.config.ts içinde agentRules: false ile bu özellik kapatılabiliyor. Bu blok artık onların işini gördüğü için eski bilgi Skill'leri emekliye ayrılıyor.

Her gün paralel olarak birkaç kodlama agent'ı çalıştırıyorum, bu yüzden eskimiş framework bilgisini her prompt'ta ayrı ayrı düzeltmek yerine repo seviyesinde bir kez çözmeyi tercih ederim. Ekipler için iki not var. next dev bir agent ile birlikte ilk kez çalıştığında bu blok beklenmedik bir diff olarak karşınıza çıkabilir; önerilen yaklaşım onu olduğu gibi commit'lemek. Monorepo'larda ise bloğun kendisi next paketinin repo kökünden görünmeyebileceği konusunda uyarıyor; bu yüzden yolun, dosyanın bulunduğu yerden çözümlendiğini kontrol edin.

Asıl taşıma işi Instant Navigations#

next.config.ts içinde cacheComponents: true ve partialPrefetching: true ayarlandığında Instant Navigations devreye giriyor. Bunun içinde şunlar var: anlık olmayan geçişleri işaretleyen bir devtool olan Instant Insights; hedef sayfanın ne kadarının önceden yükleneceğini link bazında kontrol etmenizi sağlayan Partial Prefetching; önceden render etmediğiniz bir sayfanın ilk ziyaretçisine bir loading shell sunan yeni bir ISR davranışı; ve kullanıcıların ne gördüğünü görebilmeniz için bir geçişi shell aşamasında duraklatan Navigation Inspector.

Yazı, bu davranışların Next.js'i "dynamic by default, with no hidden or implicit caching" yaklaşımına geri taşımanın bir parçası olarak gelecekteki bir major sürümde varsayılan hale geleceğini açıkça belirtiyor. Bu da Cache Components geçişini "yapılacak mı" değil, "ne zaman yapılacak" sorusuna dönüştürüyor. Sürüm notları, mevcut bir uygulamayı taşımak için bir rehbere link veriyor ve bunu sizin ya da agent'ınızın adım adım ilerleyebileceği bir iş olarak sunuyor.

"Anlık" olmayı başarısız olabilen bir teste dönüştürmek#

İlk benimseyeceğim parça @next/playwright içindeki instant() helper'ı. Bir geçiş sırasında hangi içeriğin görünür olduğunu network'ü beklemeden doğruluyor; böylece bir route'u yavaşlatan bir refactor production'a ulaşmak yerine testte patlıyor. Yazının bunun nasıl olduğuna dair verdiği örnek de gayet gerçekçi: cookies() okuyan bir component ortak bir header'a ekleniyor ve route'u request-time rendering'e itiyor.

await instant(page, async () => {
  await page.click('a[href="/products/hats"]');
  await expect(page.locator('h1')).toContainText('Baseball Cap');
});

Bu, genelde birinin kafasında yaşayan bir performans özelliğini her PR'da çalışan bir kontrole dönüştürüyor.

Göz atmaya değer diğerleri: retry() ile birlikte catchError error boundary'leri, next/root-params ve Turbopack'te import.meta.glob. Deneysel flag'lerin arkasında ise Rust tabanlı bir React Compiler ve useOffline bekliyor.

Ben ne yapıyorum#

Çalıştırdığım Next.js uygulamaları için planım da aynı ayrımı izliyor:

• Ayrı bir branch'te yükseltip dev bellek kullanımını ve build sürelerini vendor grafiklerine güvenmek yerine kendim ölçmek.
• Build önbelleğinin deploy build'leri arasında korunduğundan emin olmak; aksi halde build hızlanması teoride kalır.
• TypeScript 7'yi ayrı bir değişiklik olarak denemek; böylece tip kontrolündeki bir fark framework regresyonu sanılmaz.
• Yönetilen AGENTS.md bloğunu olduğu gibi commit'lemek ve kendi agent kurallarımızı işaretçilerin dışında tutmak.
• cacheComponents'i bir branch'te, her seferinde tek bir özellik alanıyla ve kullanıcıların en sık kullandığı birkaç geçiş için instant() testleriyle denemek.

Ücretsiz kazanımları bu hafta almaya değer. Cache Components geçişine ise şimdiden, yavaş yavaş başlamaya değer, çünkü framework'ün gittiği yön orası.