Next.js 16.3, sayfalar arası geçişi neredeyse anında hissettiren yeni bir özellik paketiyle geldi: Instant Navigations. Bu rehberde cacheComponents ve partialPrefetching flag'lerini nasıl açacağını, 'use cache' ile <Suspense>'in navigasyon sırasında nasıl birlikte çalıştığını ve 16.2'den 16.3'e güvenli şekilde nasıl geçeceğini adım adım göreceksin. Next.js 16.3 Instant Navigations, uygulamanı client-driven bir SPA gibi hızlı hissettirirken server-driven modelin avantajlarını da korumayı hedefliyor.
💡 Pro Tip:cacheComponentsflag'ini açar açmaz tüm route'larını aynı anda migrate etmeye çalışma —instant = falseile route route ilerlemek, büyük bir App Router projesinde build'i tek seferde kırmamanın en güvenli yolu.
İçindekiler
- Next.js 16.3 tek bakışta
- Instant Navigations ne çözüyor
- cacheComponents ve partialPrefetching flag'lerini açmak
- Shell'den fazlasını prefetch etmek
- 'use cache' ile Suspense'in birlikte çalışması
- Instant Insights paneli ve instant = false doğrulama davranışı
- Navigation Inspector ve @next/playwright instant() regresyon testi
- 16.2'den 16.3'e migrasyon checklist'i
- Instant Insights ile nasıl ölçersin
- SSS
- Next.js 16.3'te Instant Navigations nasıl açılır?
- cacheComponents true yapınca hangi API'ler kırılır?
- Partial Prefetching ile loading.tsx arasındaki fark ne?
- Next.js 16.2'den 16.3'e güvenli upgrade nasıl yapılır?
- Instant Navigations kullanmak için tüm projeyi Cache Components'a geçirmek zorunda mıyım?
- Instant Insights paneli production'da da çalışıyor mu?
- Güncelleme (Eylül 2026)
- Sonuç
- Kaynaklar
Next.js 16.3 tek bakışta
Next.js 16.3, 3 Ağustos 2026'da stable olarak yayınlandı (npm registry kaydı: 16.3.0 → 2026-08-03T20:34:17Z). Bu sürümle birlikte gelen Instant Navigations, tek bir özellik değil; birbirini tamamlayan bir araç paketi: Instant Insights paneli, Partial Prefetching, Navigation Inspector devtool'u, daha iyi bir ISR loading shell davranışı ve Playwright için özel bir test yardımcısı. Next.js ekibi bu davranışların ileride bir major sürümde varsayılan hale geleceğini de açıkça belirtiyor — yani bugün deneysel flag'lerle test ettiğin şey, yarının default'u.
Bu makaleyi yazdığımız 14 Ağustos 2026 itibarıyla npm'de en güncel stable sürüm 16.3.1'di (13 Ağustos'ta yayınlandı) — yani projene "16.3'e geç" derken pratikte "16.3.1'e geç" demiş oluyorsun. 16.3.1'den sonraki patch'ler için makalenin sonundaki Güncelleme bölümüne bak.
Sürüm | Yayın tarihi | 14 Ağustos itibarıyla durum |
|---|---|---|
16.3.0 | 2026-08-03 | Stable, Instant Navigations'ın ilk hali |
16.3.1 | 2026-08-13 | O tarihte en güncel stable |
Instant Navigations ne çözüyor
App Router'ın server-driven mimarisi SEO ve ilk yükleme performansı için güçlü; ama link'ler arası geçişlerde bazen client-driven bir SPA kadar "anında" hissettirmiyordu. Instant Navigations, tam olarak bu boşluğu; server'ın avantajlarını kaybetmeden SPA'nın tepkiselliğini eklemeyi hedefleyerek kapatıyor.
Bunun somut karşılığı şu: 16.2'de her link kendi prefetch isteğini tetikliyordu — aynı route'a giden birden fazla link olsa bile Next.js her biri için ayrı bir prefetch isteği yapıyordu. 16.3'te bu davranış, route başına paylaşılan bir "shell" yaklaşımına dönüşüyor; aynı route'a giden linkler artık aynı prefetch edilmiş shell'i paylaşıyor.
Bu değişikliğin arkasındaki motivasyon salt performans değil, aynı zamanda geliştirici deneyimi. Önceden "bu sayfa neden yavaş hissettiriyor" sorusuna cevap bulmak için elle profiling yapman, hangi linkin gereksiz prefetch tetiklediğini tek tek takip etmen gerekiyordu. Next.js ekibi bu davranışların ileride bir major sürümde varsayılan hale geleceğini söylediğine göre, bugün cacheComponents ve partialPrefetching ile deneyimlediğin şey aslında framework'ün gelecekteki varsayılan mimarisinin bir provası. Bu yüzden migrasyona erken başlamak, ileride zorunlu bir büyük sürüm geçişiyle karşılaşmak yerine, kendi zamanında kontrollü adımlarla ilerlemeni sağlıyor.
cacheComponents ve partialPrefetching flag'lerini açmak
Instant Navigations'ı denemek için next.config.ts dosyanda iki flag'i açman gerekiyor:
ts
1// next.config.ts2import type { NextConfig } from "next";3 4const nextConfig: NextConfig = {5 cacheComponents: true,6 partialPrefetching: true,7};8 9export default nextConfig;cacheComponents, eskiden experimental.dynamicIO veya experimental.useCache adıyla bildiğin flag'lerin yerini alıyor — projende bu iki deneysel ayardan biri varsa cacheComponents: true ile değiştirmen yeterli. Bu flag açıldığında Next.js, duyurunun ifadesiyle "when a route awaits some data on the server, you will be presented with a choice between a few options" — yani server'da veri bekleyen route'lar için üç seçenekten birini net şekilde seçmeni istiyor: Stream, Cache veya Block. Anında render olmaya devam edenler içinse ek iş yok.
partialPrefetching ise ayrı bir davranış: Next.js artık link başına değil, route başına bir kez "yeniden kullanılabilir shell" çıkarıp prefetch ediyor; bu shell'ler client'ta cache'leniyor ve aynı route'a giden bütün linkler arasında paylaşılıyor, yani her shell oturum boyunca yalnızca bir kez çekiliyor. Edge runtime'da serverless cache pattern'leri merak ediyorsan Hono.js: Serverless Web Framework Production Rehberi yazımız iyi bir başlangıç noktası.
Shell'den fazlasını prefetch etmek
Partial Prefetching açıkken varsayılan davranış, viewport'taki her ayrı route için yalnızca yeniden kullanılabilir shell'i çekmek. Ama bazen shell'den fazlasını istersin — örneğin bir sohbet sayfasının başlığının anında yerine oturmasını. Bunun için ilgili linke <Link prefetch={true}> vererek link başına prefetch'e opt-in olabilirsin.
Bu durumda bile Next.js route'un tamamını en derine kadar render etmeye çalışmaz: yalnızca senkron olarak hazır olan, URL'den bilinen (params veya searchParams gibi) ya da 'use cache' ile işaretlenmiş içeriğe kadar iner. Yani prefetch'te artık "hep ya da hiç" bir seçim yapmak zorunda değilsin — shell sana temel seviyeyi verir, <Link prefetch={true}> ile 'use cache' birlikte ise seçtiğin linklerde bunun üstüne daha fazla içerik ekler. Pratikte bu, "kullanıcının en çok tıkladığı iki üç linki derinleştir, gerisini shell'de bırak" gibi ölçülü bir strateji kurmanı mümkün kılıyor.
'use cache' ile Suspense'in birlikte çalışması
cacheComponents açıkken server'da veri bekleyen her route segmentinin davranışını üç yoldan biriyle tanımlaman gerekiyor:
- Stream: veriyi
<Suspense>sınırı içine alıp asenkron akıtırsın; kullanıcı shell'i hemen görür, veri geldikçe içerik dolar. - Cache: fonksiyonun başına
'use cache'direktifi koyup sonucu cache'lersin; aynı girdiyle tekrar çağrıldığında Next.js cache'ten döner. - Block: navigasyonu bilinçli olarak server-bound bırakırsın — o route parçası için "hemen shell gösterme, veriyi bekle" dersin.
Bu üç seçeneği hangi durumda tercih edeceğini kabaca şöyle özetleyebilirsin:
Seçenek | Ne zaman kullanılır | Kullanıcı ne görür |
|---|---|---|
Stream | Veri yavaş ama sayfanın geri kalanı hazır (ör. yorumlar, öneriler) | Shell hemen gelir, veri geldikçe alan dolar |
Cache | Veri sık değişmiyor ve tekrar hesaplamak pahalı (ör. ürün açıklaması) | İçerik neredeyse anında, cache'ten gelir |
Block | Bu route için loading shell göstermek istemiyorsun (ör. blog yazısı sayfası) | Sayfa, veri hazır olana kadar server'da bekletilir |
Bir route'u yanlış kategoriye koymak, Instant Navigations'ın faydasını sıfırlayabilir: her şeyi Block yaparsan hiçbir kazanç elde etmezsin, kullanıcıya özel veriyi düz 'use cache' yerine 'use cache: private' ile ele almalısın (düz 'use cache' sunucuda paylaşılan bir önbellektir). Bu yüzden migrasyonda route route ilerlemek yalnızca build'i kırmamak için değil, bu üçlü kararı dikkatli vermek için de gerekli.
tsx
1// app/products/[id]/page.tsx2import { Suspense } from "react";3 4type Product = { name: string; price: number };5 6async function getProduct(id: string): Promise<Product> {7 "use cache";8 const res = await fetch(`https://api.example.com/products/${id}`);9 return res.json();10}11 12function ProductSkeleton() {13 return <div aria-busy="true">Ürün yükleniyor…</div>;14}15 16async function ProductDetail({ params }: { params: Promise<{ id: string }> }) {17 const { id } = await params;18 const product = await getProduct(id);19 return (20 <article>21 <h1>{product.name}</h1>22 <p>{product.price} TL</p>23 </article>24 );25}26 27export default function ProductPage({ params }: PageProps<"/products/[id]">) {28 return (29 <Suspense fallback={<ProductSkeleton />}>30 <ProductDetail params={params} />31 </Suspense>32 );33}Buradaki desen tesadüf değil. params artık bir promise; resmi dokümantasyonun ifadesiyle "you must use async/await or React's use function to access the values". Cache Components rehberi de bir adım öteye gidip promise'i bileşenin tepesinde await etmek yerine <Suspense> sınırına prop olarak geçirmeni söylüyor — böylece henüz bilinmeyen param'lar için bile statik shell üretilebiliyor. PageProps global bir yardımcı, ayrıca import etmen gerekmiyor; tipler next dev, next build ya da next typegen sırasında üretiliyor.
Burada dikkat etmen gereken kritik nokta: 'use cache' işaretli bir fonksiyon (ya da onun çağırdığı herhangi bir yardımcı fonksiyon) cookies(), headers() veya searchParams gibi request-scoped API'leri doğrudan okuyamaz — next-request-in-use-cache hatası alırsın. Çözüm, bu değerleri cache dışında okuyup fonksiyona parametre olarak geçirmek.
Instant Insights paneli ve instant = false doğrulama davranışı
Next.js 16.3'ün getirdiği Instant Insights paneli, yavaş navigasyonları otomatik olarak yüzeye çıkarıyor — yani hangi route geçişinin "instant" hissetmediğini elle profiling yapmadan görebiliyorsun. Bu, özellikle büyük bir App Router projesinde onlarca route'u tek tek elle taramak yerine, panelin işaret ettiği yerlere odaklanmanı sağlıyor. Burada bir noktayı akılda tutman gerekiyor: bir segmenti instant = false ile işaretlemek onu doğrulamanın tamamen dışına çıkarır — dokümanın ifadesiyle "Setting instant = false on a segment opts it out of validation entirely". Yani bilinçli olarak Block'ta bıraktığın route'lar panelde uyarı üretmez. Migrasyonda bu ayrım işine yarıyor: Block kararını verdiğin ya da henüz karara bağlamadığın segmentleri false ile susturup, kalan route'ları gürültüsüz takip edebiliyorsun.
Navigation Inspector ve @next/playwright instant() regresyon testi
Instant Navigations paketinin devtool tarafında Navigation Inspector var: bir navigasyonun loading shell'ini görsel olarak inceleyebildiğin yeni bir araç. Bunu, "bu route'ta shell neden bu kadar boş/eksik görünüyor" sorusuna cevap ararken kullanıyorsun — inspector sayfayı ilk yükleme durumunda donduruyor: doğrudan ziyaretlerde statik shell'i, client navigasyonlarında prefetch edilmiş hedefi gösteriyor. Hangi Suspense sınırının neyi kapsadığını görmek içinse doküman, inspector'ı React DevTools'un Suspense paneliyle eşlemeni öneriyor.
Test tarafında Next.js, Playwright testleri için özel bir instant yardımcı fonksiyonu sağlıyor. Bu sayede bir navigasyonun gerçekten cache'lenmiş shell'den mi yoksa server'dan mı geldiğini regresyon testlerine yazabiliyorsun — CI'da birileri yanlışlıkla bir route'u tekrar Block moduna düşürürse bunu fark edebilirsin. Yardımcı @next/playwright paketinden geliyor ve şöyle kullanılıyor:
ts
1import { expect, test } from "@playwright/test";2import { instant } from "@next/playwright";3 4test("product title is available immediately", async ({ page }) => {5 await page.goto("/products/shoes");6 7 // Ağı beklemeden neyin görünür olduğunu doğrula8 await instant(page, async () => {9 await page.click('a[href="/products/hats"]');10 await expect(page.locator("h1")).toContainText("Baseball Cap");11 await expect(page.getByText("Checking inventory...")).toBeVisible();12 });13 14 await expect(page.getByText("12 in stock")).toBeVisible();15});Ayrım şurada: instant() bloğunun içine yazdığın iddialar, link tıklandıktan hemen sonra ağ turu beklenmeden görünmesi gereken şeylerdir — burada hem yeni sayfanın başlığı hem de "yükleniyor" durumundaki alan doğrulanıyor. Bloğun dışında kalan iddia ise ancak veri geldikten sonra sağlanır. Böylece sen (ya da senin adına çalışan bir kod ajanı) her link tıklamasından sonra tam olarak neyin anında görünmek zorunda olduğunu ince taneli biçimde sabitleyebiliyorsun; bu, "sayfa açılıyor" gibi bulanık bir testten çok daha güçlü bir regresyon ağı kuruyor.
16.2'den 16.3'e migrasyon checklist'i
Adım | Ne yapmalısın | Neden |
|---|---|---|
1. Codemod çalıştır | npx @next/codemod upgrade | Resmi upgrade codemod'u; config ve import düzeltmelerini otomatikleştirir |
2. Deneysel flag'leri değiştir | experimental.dynamicIO / experimental.useCache yerine cacheComponents: true | Bu flag'ler cacheComponents içinde birleşti |
3. Route segment config'lerini temizle | dynamic, revalidate, fetchCache export'larını kaldır | cacheComponents açıkken bu export'lar hata verir; yerine 'use cache' + cacheLife kullan |
4. Kademeli geç | Hazır olmayan route'ları instant = false ile işaretle (codemod'la toplu yapılır) | Tüm projeyi tek seferde migrate etmek yerine route route ilerlemene izin verir |
5. Build ve test çalıştır | next build + mevcut test suite | Senkron IO ( new Date(), Math.random(), crypto.randomUUID()) hâlâ prerender'ı kırabilir |
Codemod'u çalıştırmadan önce projenin temiz bir git durumunda olduğundan emin ol; codemod dosyalarını doğrudan değiştirir ve diff'i gözden geçirmen gerekir:
bash
1# proje kökünde2git status --short3npx @next/codemod upgrade4git diff --statCodemod her şeyi otomatik çözmez — özellikle route segment config'lerini kaldırıp 'use cache' ile değiştirmek elle yapman gereken bir adım. Örneğin eskiden dosya seviyesinde dynamic, revalidate veya fetchCache export'uyla tanımladığın davranışı, cacheComponents açıkken artık ilgili fonksiyonun içine 'use cache' direktifi ve cacheLife ile fonksiyon seviyesinde tanımlıyorsun. Kural tek cümleyle şu: dosya-seviyesi statik bir config yerine, fonksiyon-seviyesi açık bir cache direktifi. revalidate değerin yerleşik cacheLife profillerinden birine ('seconds', 'minutes', 'hours', 'days', 'weeks', 'max') birebir denk gelmiyorsa en yakınını seç ya da kendi profilini tanımla. fetchCache'e ise artık ihtiyacın yok: 'use cache' kapsamındaki tüm veri çekme işlemleri otomatik cache'leniyor.
Henüz Stream/Cache/Block kararını veremediğin route'lar için, o route segmentini geçici olarak eski (Instant Navigations öncesi) davranışta bırakabilirsin:
tsx
1// app/checkout/page.tsx2export const instant = false;3 4export default function CheckoutPage() {5 // Bu route hazır olana kadar eski, server-bound davranışta kalır6 return <CheckoutForm />;7}Bunu tüm uygulamada tek geçişte yapmak istersen elle dosya dolaşmana gerek yok; resmi bir codemod var. instant bildirmeyen her page, layout ve default dosyasına opt-out ekliyor:
bash
1npx @next/codemod@canary cache-components-instant-false ./appsrc/ kullanan bir projede yolu ./src/app olarak vermen gerekiyor. Dikkat: yanlış yol verirsen komut hata vermez, 0 ok raporlar — bu yüzden çıktıdaki dosya sayısını mutlaka kontrol et. Codemod, "use client" işaretli dosyaları ve zaten instant bildiren dosyaları atlıyor.
Bu, migrasyonu "hep ya da hiç" olmaktan çıkarıp, ekibinin route'ları kendi hızında, birer birer Cache Components'a taşımasına izin veriyor. Bu yüzden checklist'teki 4. adımı atlamamak önemli: Block'ta bıraktığın route'u instant = false ile açıkça işaretle, çünkü işaretlemediğin her Page ve Default segmenti varsayılan validationLevel: 'warning' ile geliştirmede doğrulanmaya devam eder.
Migrasyonu elle sürüklemek istemiyorsan, Next.js ekibi Instant Navigations duyurusunda bu iş için hazırladıkları bir "Skill"den bahsediyor: mevcut bir uygulamada Cache Components'ı ilk kez benimserken sürecin adımlarını ajanına yürüttürebileceğin resmi bir kaynak. CI/CD pipeline'ını bu değişiklikle birlikte gözden geçirirken Mobile DevOps Best Practices yazısındaki genel prensipler de işine yarayabilir.
Instant Insights ile nasıl ölçersin
Aşağıdaki adımlarla kendi projende ölçersin:
cacheComponentsvepartialPrefetchingflag'lerini açtıktan sonra Next.js dev sunucusunu başlat.- Dev sunucusunda uygulamada gezin — Instant Insights yavaş navigasyonları kendiliğinden yüzeye çıkarır; doğrulama, bir segmente yapılan navigasyonun anında olmasını engelleyecek şeyleri gösterir: hangi navigasyonun bloklayacağını, nerede
<Suspense>sınırının eksik olduğunu. - Panelin işaret ettiği route'larda Navigation Inspector'ı kullanarak loading shell'in neden eksik/boş göründüğünü görsel olarak incele.
- Şüpheli route'u Stream, Cache, Block üçlüsünden hangisine attığını kontrol et — doğrulama hatası bloklayan bileşeni adıyla söyler; çözüm çoğunlukla
use cacheya da bir<Suspense>sınırıdır. - Düzelttikten sonra Playwright
instantyardımcısıyla bu route için bir regresyon testi ekle; böylece ileride biri route'u yanlışlıkla tekrar Block moduna düşürürse CI bunu yakalar.
Bu adımları izlediğinde "hangi sayfa neden yavaş hissettiriyor" sorusuna kendi projenin gerçek verisiyle cevap verebilirsin — hazır bir benchmark tablosuna bakmak yerine. Route bazlı veri katmanını edge-uyumlu bir ORM'le kurmayı düşünüyorsan Drizzle ORM + Turso: Edge SQLite Database Pattern yazımıza da göz atabilirsin.
ALTIN İPUCU
Bu yazının en değerli bilgisi
Bu ipucu, yazının en önemli çıkarımını içeriyor.
Easter Egg
Gizli bir bilgi buldun!
Bu bölümde gizli bir bilgi var. Keşfetmek ister misin?
Okuyucu Ödülü
Next.js 16.3'e geçerken unutmaman gereken adımları tek sayfalık bir checklist'e topladık; aşağıdaki maddeleri kendi projende sırayla işaretleyerek ilerleyebilirsin.
SSS
Next.js 16.3'te Instant Navigations nasıl açılır?
next.config.ts içinde iki üst seviye flag'i açman gerekiyor: cacheComponents: true ve partialPrefetching: true. Cache Components açıldıktan sonra Next.js, server'da veri bekleyen route'lar için Stream, Cache veya Block seçimini önüne koyar (anında render olmaya devam edenlerde ek iş yok); veri <Suspense> ile stream edilir, 'use cache' ile cache'lenir ya da route bilinçli olarak server-bound bırakılır.
cacheComponents true yapınca hangi API'ler kırılır?
Önce route segment config'leri (dynamic, revalidate, fetchCache) hata verir — yerine 'use cache' ve cacheLife gelir. Ayrıca 'use cache' işaretli bir fonksiyon (veya onun çağırdığı herhangi bir yardımcı fonksiyon) cookies(), headers() veya searchParams gibi request-scoped API'leri okursa next-request-in-use-cache hatası alırsın; dinamik render edilen bir route'ta bu hata next build'i geçip next start altında ortaya çıkabilir. Çözüm bu değerleri cache dışında okuyup parametre olarak geçirmek. Senkron IO (new Date(), Math.random(), crypto.randomUUID()) da prerender'ı kırmaya devam eder; hazır olmayan route'lar instant = false ile geçici olarak işaretlenebilir.
Partial Prefetching ile loading.tsx arasındaki fark ne?
loading.tsx manuel ve statik bir dosyayken, Partial Prefetching otomatik ve route-bazlı bir mekanizma sunuyor: Next.js her route'un UI'ından otomatik olarak yeniden kullanılabilir bir shell çıkarır, bu shell route başına bir kez cache'lenip aynı route'a giden her linkten paylaşılır. Eskiden her route için elle bir loading.tsx tanımlamak ya da her linki agresifçe prefetch etmek gerekiyordu.
Next.js 16.2'den 16.3'e güvenli upgrade nasıl yapılır?
Standart yol npx @next/codemod upgrade çalıştırıp önerilen codemod'ları kabul etmek, sonra build, test ve typecheck ile doğrulamaktır. Cache Components'a geçişte de tüm route'ları aynı anda değil, instant = false ile kademeli migrasyon önerilir; bunu tüm uygulamada tek geçişte yapmak için cache-components-instant-false codemod'u var. Yayımlanmış güvenlik yamaları ve hedeflemen gereken patch sürümü için makalenin sonundaki Güncelleme bölümüne de bak. Custom webpack config'i, üçüncü parti paketleri veya kendi auth katmanın varsa, codemod'un diff'ini gözden geçirdikten sonra bunları elle test etmen gerekir — codemod migrasyonu otomatikleştirmiyor, yalnızca kolaylaştırıyor.
Instant Navigations kullanmak için tüm projeyi Cache Components'a geçirmek zorunda mıyım?
Hayır. instant = false işaretiyle henüz hazır olmayan route'ları geçici olarak eski davranışta bırakabilir, kademeli şekilde route route ilerleyebilirsin. Bu, büyük bir App Router projesinde tek seferlik büyük bir migrasyon riski almadan Instant Navigations'ın faydalarından parça parça yararlanmanı sağlar.
Instant Insights paneli production'da da çalışıyor mu?
Hayır, panel geliştirme ortamının aracı. Next.js ekibinin kendi ifadesiyle Instant Insights ile "we've made slow navigations an error in development" — yani yavaş navigasyon geliştirmede bir hataya dönüşüyor ve panel bunları orada listeliyor. Gerçek prefetch davranışı ise, aynı kaynağın deyişiyle, "Like before, actual prefetching is only enabled in production": prefetch yalnızca production'da devreye giriyor. Pratikte akış şu: geliştirmede panel ve Navigation Inspector'la shell'i inceleyip düzeltmeyi yaparsın, prefetch'in gerçek etkisini production'da görürsün.
Güncelleme (Eylül 2026)
Bu makale 14 Ağustos 2026'da, npm'de en güncel stable sürüm 16.3.1 iken hazırlandı. Aradan geçen üç haftada, "16.3'e geç" tavsiyesini doğrudan etkileyen önemli bir gelişme oldu: 16.3.3 (25 Ağustos 2026), aynı sürümde iki kritik güvenlik açığını kapattı. Birincisi, Windows dosya sistemi üzerinde çalışan sunucularda, Pages Router ile App Router'ın Cache Components olmadan birlikte kullanıldığı uygulamalarda ortaya çıkan, kimlik doğrulaması gerektirmeyen bir uzaktan kod çalıştırma (RCE) açığıydı (CVE-2026-75604, CVSS 9.0); Linux ve macOS bu açıktan etkilenmedi. İkincisi, sharp'ın kullandığı libheif kütüphanesinde, saldırgan kontrollü bir AVIF görseli optimize edilirken tetiklenebilen, kimlik doğrulama gerektirmeyen bir uzaktan kod çalıştırma açığıydı (CVSS 9.5); bu ikinci açık ortaya çıkınca yama takvimi bir gün öne, 25 Ağustos'a çekildi. 16.3.3, geçici çözüm olarak AVIF optimizasyonunu devre dışı bıraktı; 16.3.4 (31 Ağustos 2026) bu optimizasyonu güvenli şekilde geri açtı ve ek build/test-mode düzeltmeleri getirdi.
Pratik sonuç şu: bu makaledeki adımları uygularken hedefin "Next.js 16.3'e geçmek" değil, en az 16.3.4'e (veya üstüne) yükselmek olmalı — 16.3.0-16.3.2 arasında kalmak, iki kritik açığa karşı savunmasız kalmak demek. Ayrıca Cache Components migrasyon rehberi 25 Ağustos 2026'da güncellendi; kademeli adopsiyon adımlarının ve cache-components-instant-false codemod'unun güncel hâli için resmi dokümantasyona bakmanı öneririm.
Sonuç
Next.js 16.3'ün Instant Navigations paketi, tek bir büyük özellik değil; cacheComponents ve partialPrefetching flag'leriyle açtığın, Stream/Cache/Block üçlüsüyle yönettiğin ve Instant Insights ile Navigation Inspector'la izlediğin bir bütün. Kademeli migrasyon için instant = false senin güvenlik ağın; 16.2'den geliyorsan codemod'la başla, route route ilerle ve yayımlanan güvenlik yamalarını (bkz. Güncelleme bölümü) ihmal etme.
Edge tarafında benzer bir "cache-first" düşünceyi görmek istersen Supabase Edge Functions: Deno Runtime ile Serverless Backend yazımıza bakabilirsin. Mobil tarafta yeni mimarilerin nasıl kademeli benimsendiğini merak ediyorsan React Native New Architecture: Fabric, TurboModules ve Bridgeless Mode yazımız benzer bir migrasyon disiplinini anlatıyor. Serverless framework tercihlerini karşılaştırmak istersen Hono.js: Serverless Web Framework Production Rehberi ve edge-uyumlu veri katmanı için Drizzle ORM + Turso: Edge SQLite Database Pattern yazılarımız da bu rehberi tamamlıyor.
Kaynaklar
- Next.js 16.3 — Instant Navigations paketinin genel duyurusu ve özellik listesi
- Next.js 16.3: Instant Navigations — Stream/Cache/Block modeli, Partial Prefetching ve Playwright instant() yardımcısının birincil kaynağı
- Cache Components'a Geçiş Rehberi — cacheComponents flag'i, route segment config kısıtları ve instant=false kademeli migrasyon
- Next.js Codemod'ları —
npx @next/codemod upgradeile otomatik migrasyon - Ağustos 2026 Güvenlik Sürümü — 16.3.3'te kapatılan iki kritik RCE'nin resmi açıklaması ve advisory bağlantıları (Güncelleme bölümü için)
- npm registry: next paketi metadata'sı —
timealanında 16.3.0'dan 16.3.4'e kadar yayın damgalarının doğrulaması (Güncelleme bölümü için)

