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ı:
1// Next.js 14 - varsayılan olarak cache'li (force-cache)
2const data = await fetch('https://api.example.com/data');
3
4// Next.js 15 - varsayılan olarak cache'siz (no-store)
5const data = await fetch('https://api.example.com/data');
6
7// Next.js 15'te cache istiyorsanız açıkça belirtmeniz gerekiyor
8const data = await fetch('https://api.example.com/data', {
9 next: { revalidate: 3600 } // 1 saat cache
10});
11
12// Veya force-cache
13const data = await fetch('https://api.example.com/data', {
14 cache: 'force-cache'
15});Route handler'lar da artık dinamik:
1// app/api/data/route.ts
2
3// Next.js 14: Bu GET handler build time'da statik oluşturuluyordu
4// Next.js 15: Her istekte çalışır (dinamik)
5export async function GET() {
6 const data = await db.query('SELECT * FROM products');
7 return Response.json(data);
8}
9
10// Statik yapmak istiyorsanız:
11export 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:
| Metrik | Webpack | Turbopack | İyileşme |
|---|---|---|---|
| Yerel sunucu başlatma | ~3.5s | ~0.8s | %76.7 daha hızlı |
| Fast Refresh | ~320ms | ~12ms | %96.3 daha hızlı |
| Initial compile | ~2.8s | ~1.5s | %45.8 daha hızlı |
| Route compile | ~450ms | ~35ms | %92 daha hızlı |
1# Turbopack ile geliştirme sunucusu başlatma
2next dev --turbopack
3
4# veya package.json'da:
5# "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:
1import { use } from 'react';
2
3// Suspense ile otomatik entegre çalışır
4function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
5 const user = use(userPromise);
6 return <h1>{user.name}</h1>;
7}
8
9// Server Component'tan kullanım
10export default async function Page() {
11 const userPromise = fetchUser(); // await YOK, promise geçiriyoruz
12 return (
13 <Suspense fallback={<Loading />}>
14 <UserProfile userPromise={userPromise} />
15 </Suspense>
16 );
17}Server Actions: Güvenlik İyileştirmeleri
React 19'un Server Actions'ı Next.js 15'te daha güvenli hale geldi:
1// app/actions.ts
2'use server';
3
4export async function createPost(formData: FormData) {
5 // Next.js 15: Bu action artık tahmin edilemez bir endpoint'e sahip
6 // Kullanılmayan Server Actions, production build'den otomatik çıkarılır (tree-shaking)
7 const title = formData.get('title') as string;
8 const content = formData.get('content') as string;
9
10 await db.posts.create({ data: { title, content } });
11 revalidatePath('/blog');
12 redirect('/blog');
13}
14
15// app/blog/new/page.tsx
16import { createPost } from '@/app/actions';
17
18export default function NewPost() {
19 return (
20 <form action={createPost}>
21 <input name="title" required />
22 <textarea name="content" required />
23 <button type="submit">Yayınla</button>
24 </form>
25 );
26}next/form Bileşeni
Yeni <Form> bileşeni, HTML <form> elemanını genişleterek client-side navigasyon, prefetching ve progresif geliştirme sunuyor:
1import Form from 'next/form';
2
3export default function SearchForm() {
4 return (
5 <Form action="/search">
6 <input name="query" placeholder="Blog yazısı ara..." />
7 <button type="submit">Ara</button>
8 </Form>
9 );
10 // JS yüklenmeden önce: Normal form submit (tam sayfa yenileme)
11 // JS yüklendikten sonra: Client-side navigasyon + layout korunur
12 // Bonus: /search sayfası otomatik prefetch edilir
13}next/after: Arka Plan İşlemleri
Response gönderildikten sonra arka planda iş yapabilme özelliği:
1import { after } from 'next/server';
2
3export async function POST(request: Request) {
4 const data = await request.json();
5 const result = await processOrder(data);
6
7 // Response gönderildikten SONRA çalışır
8 // Kullanıcı beklemez!
9 after(async () => {
10 await sendConfirmationEmail(data.email);
11 await updateAnalytics('order_placed');
12 await notifySlack(`Yeni sipariş: ${result.id}`);
13 });
14
15 return Response.json(result); // Hemen döner
16}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ı:
1// app/product/[id]/page.tsx
2import { Suspense } from 'react';
3
4export default function ProductPage({ params }) {
5 return (
6 <div>
7 {/* Bu kısım build time'da statik oluşturulur */}
8 <Header />
9 <ProductInfo id={params.id} />
10
11 {/* Bu kısım her istekte dinamik render edilir */}
12 <Suspense fallback={<PriceSkeleton />}>
13 <DynamicPrice id={params.id} />
14 </Suspense>
15
16 <Suspense fallback={<ReviewsSkeleton />}>
17 <UserReviews id={params.id} />
18 </Suspense>
19
20 {/* Statik footer */}
21 <Footer />
22 </div>
23 );
24}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
| Değişiklik | Detay |
|---|---|
instrumentation.js | Sunucu yaşam döngüsü hook'ları (OpenTelemetry entegrasyonu) |
| ESLint 9 | Flat config desteği, eslint-config-next güncellendi |
next.config.ts | TypeScript config dosyası desteği |
| Hydration hataları | Daha açıklayıcı hata mesajları, kaynak kod gösterimi |
forbidden() / unauthorized() | Yeni HTTP hata yardımcıları |
Upgrade Rehberi
1# Next.js 15'e yükseltme
2npx @next/codemod@latest upgrade latest
3
4# Manuel yükseltme
5npm install next@latest react@latest react-dom@latest
6
7# Caching değişikliklerini kontrol etme
8# Tüm fetch() çağrılarını gözden geçirin
9# cache: 'force-cache' veya next.revalidate eklemeniz gerekebilirSonuç
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:
