Next.js 15 Yayınlandı: React 19, Turbopack ve Yeni Caching Stratejisi

Web Framework'ünde Dönüm Noktası

Vercel, Next.js 15'i 21 Ekim 2024'te yayınladı. Bu sürüm, framework'ün en tartışmalı konularından biri olan caching davranışını kökten değiştiriyor ve React 19 ile tam uyumluluk sunuyor. Next.js ekosistemindeki en kapsamlı güncellemelerden biri.

Caching Stratejisi Baştan Yazıldı

Next.js 13 ve 14'ün en çok şikayet edilen özelliği agresif caching'di. fetch istekleri varsayılan olarak cache'leniyor, route handler'lar statik olarak oluşturuluyordu. Bu durum özellikle dinamik verilere bağımlı uygulamalarda beklenmedik davranışlara yol açıyordu.

Next.js 15'te köklü bir değişiklik yapıldı:

// Next.js 14 - varsayılan olarak cache'li (force-cache)
const data = await fetch('https://api.example.com/data');

// Next.js 15 - varsayılan olarak cache'siz (no-store)
const data = await fetch('https://api.example.com/data');

// Next.js 15'te cache istiyorsanız açıkça belirtmeniz gerekiyor
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 } // 1 saat cache
});

// Veya force-cache
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache'
});

Route handler'lar da artık dinamik:

// app/api/data/route.ts

// Next.js 14: Bu GET handler build time'da statik oluşturuluyordu
// Next.js 15: Her istekte çalışır (dinamik)
export async function GET() {
  const data = await db.query('SELECT * FROM products');
  return Response.json(data);
}

// Statik yapmak istiyorsanız:
export const dynamic = 'force-static';

Turbopack Dev Artık Stabil

Webpack'in yerine geçmesi planlanan Turbopack, Next.js 15'te dev modu için stabil hale geldi. Rust tabanlı bu bundler, büyük projelerde ciddi performans kazanımları sunuyor:

# Turbopack ile geliştirme sunucusu başlatma
next dev --turbopack

# veya package.json'da:
# "dev": "next dev --turbopack"

Önemli not: Turbopack henüz sadece next dev için stabil. Production build'ler (next build) hâlâ Webpack kullanıyor ve Turbopack build desteği 2025'te gelecek.

React 19 ile Tam Entegrasyon

Next.js 15, React 19 ile tam uyumlu. Server Components ve Server Actions artık daha performanslı çalışıyor. Yeni use hook'u ile promise ve context okuma işlemleri basitleştirildi:

import { use } from 'react';

// Suspense ile otomatik entegre çalışır
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}

// Server Component'tan kullanım
export default async function Page() {
  const userPromise = fetchUser(); // await YOK, promise geçiriyoruz
  return (
    <Suspense fallback={<Loading />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

Server Actions: Güvenlik İyileştirmeleri

React 19'un Server Actions'ı Next.js 15'te daha güvenli hale geldi:

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  // Next.js 15: Bu action artık tahmin edilemez bir endpoint'e sahip
  // Kullanılmayan Server Actions, production build'den otomatik çıkarılır (tree-shaking)
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  await db.posts.create({ data: { title, content } });
  revalidatePath('/blog');
  redirect('/blog');
}

// app/blog/new/page.tsx
import { createPost } from '@/app/actions';

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Yayınla</button>
    </form>
  );
}

next/form Bileşeni

Yeni <Form> bileşeni, HTML <form> elemanını genişleterek client-side navigasyon, prefetching ve progresif geliştirme sunuyor:

import Form from 'next/form';

export default function SearchForm() {
  return (
    <Form action="/search">
      <input name="query" placeholder="Blog yazısı ara..." />
      <button type="submit">Ara</button>
    </Form>
  );
  // JS yüklenmeden önce: Normal form submit (tam sayfa yenileme)
  // JS yüklendikten sonra: Client-side navigasyon + layout korunur
  // Bonus: /search sayfası otomatik prefetch edilir
}

next/after: Arka Plan İşlemleri

Response gönderildikten sonra arka planda iş yapabilme özelliği:

import { after } from 'next/server';

export async function POST(request: Request) {
  const data = await request.json();
  const result = await processOrder(data);
  
  // Response gönderildikten SONRA çalışır
  // Kullanıcı beklemez!
  after(async () => {
    await sendConfirmationEmail(data.email);
    await updateAnalytics('order_placed');
    await notifySlack(`Yeni sipariş: ${result.id}`);
  });
  
  return Response.json(result); // Hemen döner
}

Partial Prerendering (Deneysel)

Next.js 15'in en heyecan verici deneysel özelliği Partial Prerendering (PPR). Aynı route'ta statik shell ve dinamik delikler yaklaşımı:

// app/product/[id]/page.tsx
import { Suspense } from 'react';

export default function ProductPage({ params }) {
  return (
    <div>
      {/* Bu kısım build time'da statik oluşturulur */}
      <Header />
      <ProductInfo id={params.id} />
      
      {/* Bu kısım her istekte dinamik render edilir */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice id={params.id} />
      </Suspense>
      
      <Suspense fallback={<ReviewsSkeleton />}>
        <UserReviews id={params.id} />
      </Suspense>
      
      {/* Statik footer */}
      <Footer />
    </div>
  );
}

PPR ile sayfa ilk yüklendiğinde statik shell anında görünür (CDN'den), dinamik kısımlar stream edilir. Bu, TTFB ve LCP metriklerini dramatik olarak iyileştirir.

Diğer Önemli Değişiklikler

Upgrade Rehberi

# Next.js 15'e yükseltme
npx @next/codemod@latest upgrade latest

# Manuel yükseltme
npm install next@latest react@latest react-dom@latest

# Caching değişikliklerini kontrol etme
# Tüm fetch() çağrılarını gözden geçirin
# cache: 'force-cache' veya next.revalidate eklemeniz gerekebilir

Sonuç

Next.js 15, framework'ün developer experience odaklı evriminde önemli bir adım. Özellikle caching değişikliği, topluluğun en büyük şikayetlerinden birine doğrudan yanıt niteliğinde. Turbopack'in stabil hale gelmesi ve React 19 entegrasyonu, modern web geliştirme için güçlü bir temel sunuyor.

Cursor ve GitHub Copilot gibi AI araçlarının Next.js 15 farkındalığı da hızla arttı—kod tamamlama ve refactoring önerilerinde yeni API'ları doğru kullanıyorlar.

Kaynaklar:

• Next.js 15 Blog Yazısı
• Next.js Dokümantasyonu
• Turbopack
• React 19 Duyurusu