Navigasyon ve prefetch

Hızlı Navigasyonun Üç Parçası

Sayfalar sunucuda render edilir. Yani bir linke tıklayınca istemci sunucuyu beklemek zorunda kalabilir. Next.js bu beklemeyi üç şeyle gizler:¹

• Prefetch: <Link> ekrana girince hedefi arka planda yükler.

• Streaming: Hazır olan kısım hemen gelir, gerisi <Suspense> fallback'inin yerine akar.

• İstemci tarafı geçiş: Ortak layout'lar yerinde kalır, yalnızca değişen kısım yenilenir.

Partial Prefetching

Next.js 16.3 ile gelen Partial Prefetching, her rota için tek bir yeniden kullanılabilir App Shell üretir: URL'ye bağlı olmayan statik ve cache'li içerik, artı fallback'ler. Aynı rotaya giden yirmi link yirmi ayrı istek değil, tek bir App Shell paylaşır.²³ create-next-app ile açılan projelerde açık gelir (partialPrefetching: true).

App Shell bütün linklerde ortak olduğu için tek bir URL'ye ait veri taşıyamaz. params ve searchParams bu yüzden URL verisi sayılır. Onları <Suspense> dışında okursanız geliştirmede "URL data outside of Suspense" uyarısı çıkar. Uyarı build'i kırmaz ama o rotaya geçişin anında olmasını engelleyebilir. Çözüm, params Promise'ini await etmeden bir child'a vermektir:⁴

// app/products/[slug]/page.tsx
export default function ProductPage({ params }: PageProps<"/products/[slug]">) {
  return (
    <Suspense fallback={<p>Ürün yükleniyor...</p>}>
      <ProductDetails params={params} />
    </Suspense>
  );
}

async function ProductDetails({ params }: Pick<PageProps<"/products/[slug]">, "params">) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) notFound();

  return <h1>{product.name}</h1>;
}

cookies() ve headers() URL verisi değildir. Linke göre değil oturuma göre değişirler, App Shell'de kalabilirler.⁴

Ürün adı artık fallback'in arkasında. Tıklar tıklamaz görünsün istiyorsanız linke prefetch={true} verin. Bu, linkin params ve searchParams'ına bağlı cache'li içeriği de tıklamadan önce getirir. Bedeli her link için bir sunucu çağrısıdır; bu yüzden yalnızca en olası hedeflerde kullanın.²⁴

<Link href={`/products/${product.slug}`} prefetch>
  {product.name}
</Link>

Bu rehberin proje uygulamasında prefetch olmadan ürün sayfasına geçişte yalnızca "Ürün yükleniyor..." göründü. prefetch ve "use cache"'li getProduct ile ürün adı tıklama anında geldi. Bunu koruyan instant() testi Ürün kataloğu projesinde.

Anında Navigasyon

Next.js'in tanımıyla bir navigasyon anında (instant) ise kullanıcı tıkladığı an statik, cache'li ve fallback içerik görünür; gerisi akarak gelir.⁵

İnce bir nokta var: sayfayı doğrudan açmak ile bir linkle gelmek farklıdır. Linkle gelirken yalnızca iki sayfanın ortak layout'unun altı yeniden render edilir. Kök layout'taki bir <Suspense> doğrudan açılışı kapsar ama /products/a'dan /products/b'ye geçişi kapsamaz.⁵ Bunu elle takip etmek zor olduğu için Cache Components geliştirmede her sayfayı iki durum için de doğrular ve geçişi kilitleyen component'i hata ekranında gösterir.⁵⁶

Bir segmentin bilerek beklemesine izin vermek için:

// app/checkout/layout.tsx
export const instant = false;

İki araç daha var:⁵

• Navigation Inspector: Next.js DevTools'ta sayfayı ilk yükleme ya da prefetch edilmiş hâlinde dondurur. Kabukta ne kadar anlamlı içerik olduğunu görürsünüz.

• instant() testi: @next/playwright paketindeki yardımcı, dinamik içeriği geri tutup yalnızca anında görünen arayüzü test etmenizi sağlar. Biri ileride kabuğu bozarsa CI'da yakalanır.

Activity: Geri Dönünce State Yerinde

Cache Components açıkken Next.js, ayrıldığınız sayfayı silmez; React'in <Activity> component'iyle gizler. Geri döndüğünüzde form taslağı, scroll konumu ve açık bir <details> olduğu gibi durur. Effect'ler gizlenince temizlenir, görünür olunca yeniden kurulur. En fazla son üç rota saklanır.⁸⁹

Bu her zaman istenen davranış değildir. Bir açılır menü geri dönünce hâlâ açık durmamalı. Doküman bunu useLayoutEffect'in cleanup'ında state'i sıfırlayarak çözer:⁸

"use client";

import { useLayoutEffect, useState } from "react";

export function SortMenu() {
  const [isOpen, setIsOpen] = useState(false);

  useLayoutEffect(() => {
    return () => setIsOpen(false);
  }, []);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Sırala</button>
      {isOpen && <ul>{/* seçenekler */}</ul>}
    </div>
  );
}

Yavaş Ağda Geri Bildirim

Ağ yavaşsa prefetch tıklamadan önce bitmeyebilir. useLinkStatus, tıklanan linkin beklemede olduğunu söyler; linkin içine küçük bir gösterge koyabilirsiniz:¹¹⁰

"use client";

import { useLinkStatus } from "next/link";

export function PendingDot() {
  const { pending } = useLinkStatus();
  return pending ? <span aria-hidden>•</span> : null;
}

<Link href="/cart">
  Sepet <PendingDot />
</Link>

Göstergeyi kısa bir gecikmeyle (ör. 100 ms) görünür yapmak, hızlı geçişlerde yanıp sönmesini önler.¹ Binlerce linkli listelerde prefetch={false} vererek gereksiz isteği kesebilirsiniz; karşılığında o sayfalar tıklanınca yüklenir.¹

Geçişleri canlandırmak için React 19.3'te kararlı hâle gelen <ViewTransition>'ı kullanabilirsiniz. Next.js'in rehberi küçük resmin büyük görsele dönüşmesinden yön bildiren geçişlere kadar örnekler veriyor.¹¹ React tarafı View Transition ve Activity dersinde.

Kendin Dene

• Ürün listesinde next build && next start ile production'da çalışın. Network sekmesinde linkler ekrana girince gelen prefetch isteklerini izleyin. (Geliştirmede prefetch yapılmaz.)

• Bir ürün linkine prefetch verin ve gelen isteği diğerleriyle karşılaştırın.

• Ürün sayfasına bir <input> koyun, bir şey yazın, başka sayfaya gidip geri dönün. Yazdığınız duruyor mu?

• Navigation Inspector'da Pause on navigations'ı açıp bir linke tıklayın. Kabukta ne görünüyor?

Detaylı Öğrenmek İçin

• Resmi doküman: "Building App-like Experiences with Next.js 16.3"; Aurora Scharff'ın da yazarları arasında olduğu, anında navigasyonu bir uygulama üzerinden anlatan yazı.¹²

• Resmi doküman: "Instant Navigation" rehberi; kilitlenen bir navigasyonu adım adım anında hâle getirmek ve instant() testleri.⁵

• Resmi doküman: "Preserving UI state" rehberi; Activity'nin neyi koruduğu ve neyi sıfırlamanız gerektiği.⁸

• Video: Next.js Conf 2025 açılış konuşmasının anında navigasyon ve Cache Components bölümü.¹³