Next.js 15 Yenilikleri: Kapsamlı İnceleme

Next.js 15, React 19 desteği, geliştirilmiş caching mekanizmaları ve yeni API'ler ile web geliştirmede önemli bir adım ileri atıyor. Bu yazıda Next.js 15'in getirdiği tüm yenilikleri, breaking change'leri ve migration stratejilerini kapsamlı şekilde inceleyeceğiz.

React 19 Desteği

Next.js 15, React 19'u tam destekleyen ilk framework'tür. React 19 ile gelen yenilikler doğrudan Next.js projelerinizde kullanılabilir:

// React 19: useActionState hook'u
'use client';
import { useActionState } from 'react';
import { submitForm } from './actions';

export function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitForm, {
    message: '',
    errors: {},
  });

  return (
    <form action={formAction}>
      <input name="email" type="email" />
      {state.errors?.email && (
        <p className="text-red-500">{state.errors.email}</p>
      )}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Gönderiliyor...' : 'Gönder'}
      </button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

React 19 Compiler (Deneysel)

React Compiler, useMemo ve useCallback gibi manuel optimizasyonları otomatik hale getirir:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

// babel.config.js (React Compiler Babel plugin)
// npm install babel-plugin-react-compiler
module.exports = {
  plugins: [['babel-plugin-react-compiler']],
};

Bilgi: React Compiler hala deneysel aşamadadır. Production'da kullanmadan önce kapsamlı test yapmanız önerilir.

Caching Değişiklikleri (Breaking Change)

Next.js 15'in en önemli breaking change'i caching davranışındaki değişikliklerdir. Artık fetch istekleri ve route handler'lar varsayılan olarak cache'lenmez:

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

// Açıkça cache'lemek için:
const cachedData = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

// Zaman bazlı revalidation:
const revalidatedData = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 },
});

GET Route Handler'lar

// Next.js 14: GET handler'lar varsayılan olarak cache'lenirdi
// Next.js 15: Artık cache'lenmez

// app/api/posts/route.ts
export async function GET() {
  const posts = await db.post.findMany();
  return Response.json(posts);
}

// Açıkça cache'lemek için:
export const dynamic = 'force-static';
export const revalidate = 3600;

Async Request API'leri

Next.js 15'te headers(), cookies(), params ve searchParams artık asenkron API'lerdir:

// Next.js 14 (Senkron)
import { cookies } from 'next/headers';

export default function Page() {
  const cookieStore = cookies();
  const theme = cookieStore.get('theme');
  return <div>Tema: {theme?.value}</div>;
}

// Next.js 15 (Asenkron)
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme');
  return <div>Tema: {theme?.value}</div>;
}

// Params ve SearchParams da async
// Next.js 15
type Props = {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ page?: string }>;
};

export default async function BlogPost({ params, searchParams }: Props) {
  const { slug } = await params;
  const { page } = await searchParams;

  return <article>Slug: {slug}, Sayfa: {page}</article>;
}

Uyarı: Bu breaking change, mevcut projelerinizde birçok dosyayı etkileyebilir. Next.js, geçiş sürecinde uyumluluk katmanı sunar, ancak kademeli olarak tüm kullanımları güncellemeniz gerekir.

Partial Prerendering (PPR)

PPR, statik ve dinamik içeriği tek bir route'ta birleştiren deneysel bir özelliktir:

// next.config.js
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

// app/page.tsx
import { Suspense } from 'react';

export const experimental_ppr = true;

export default function Page() {
  return (
    <main>
      {/* Statik: Build zamanında render edilir */}
      <h1>Blog Yazıları</h1>
      <StaticSidebar />

      {/* Dinamik: İstek zamanında stream edilir */}
      <Suspense fallback={<PostsSkeleton />}>
        <DynamicPosts />
      </Suspense>
    </main>
  );
}

next/after API

after() API'si, response tamamlandıktan sonra arka plan görevlerini çalıştırmanıza olanak tanır:

// app/api/submit/route.ts
import { after } from 'next/server';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const data = await request.json();

  // Hızlı response dön
  const result = await processData(data);

  // Response gönderildikten sonra çalışır
  after(async () => {
    await logAnalytics({ action: 'submit', data });
    await sendNotification(data.email);
    await updateSearchIndex(result.id);
  });

  return NextResponse.json(result);
}

Turbopack Dev (Stable)

Next.js 15'te Turbopack, development modu için kararlı (stable) hale geldi:

# Turbopack ile dev server başlat
next dev --turbopack

// package.json
{
  "scripts": {
    "dev": "next dev --turbopack"
  }
}

Turbopack'in sağladığı iyileştirmeler:

İlk sayfa yükleme süresi %76.7 daha hızlı
HMR (Hot Module Replacement) %96.3 daha hızlı
Route derleme süresi %45.8 daha hızlı

next/form Bileşeni

Yeni <Form> bileşeni, progressive enhancement ile form navigasyonunu geliştirir:

import Form from 'next/form';

export default function SearchForm() {
  return (
    <Form action="/search">
      <input name="q" placeholder="Ara..." />
      <button type="submit">Ara</button>
    </Form>
  );
  // JavaScript yüklendiğinde: client-side navigation
  // JavaScript devre dışıysa: normal form submit
}

Instrumentation Hook (Stable)

// instrumentation.ts (proje kökünde)
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // Node.js runtime'a özgü setup
    const { setupTracing } = await import('./lib/tracing');
    setupTracing();
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    // Edge runtime'a özgü setup
  }
}

export function onRequestError(
  err: { digest: string } & Error,
  request: { path: string; method: string; headers: Record<string, string> },
  context: { routerKind: string; routePath: string }
) {
  // Hata raporlama servisine gönder
  errorReporter.captureException(err, {
    request,
    context,
  });
}

Migration Rehberi (v14 -> v15)

Next.js ve React'i güncelleyin: npm install next@15 react@19 react-dom@19
Codemod'ları çalıştırın: npx @next/codemod@canary upgrade latest
Async API'leri güncelleyin: cookies(), headers(), params, searchParams
Caching davranışlarını kontrol edin ve gerekli yerlere cache: 'force-cache' ekleyin
Turbopack ile test edin ve uyumsuz eklentileri güncelleyin

İpucu: Next.js codemod aracı, breaking change'lerin çoğunu otomatik olarak düzeltir. Önce codemod çalıştırın, ardından kalan sorunları manuel olarak giderin.

Sonuç

Next.js 15, React 19 entegrasyonu, caching mekanizmalarının yeniden tasarlanması, Turbopack'in kararlı hale gelmesi ve PPR gibi yeniliklerle modern web geliştirmede önemli bir sıçrama yapıyor. Caching ve async API'lerdeki breaking change'ler dikkat gerektirirken, codemod araçları geçiş sürecini kolaylaştırıyor. Yeni projelerinizde Next.js 15'i tercih edin, mevcut projelerinizi ise kademeli olarak migrate edin.

Next.js 15 Yenilikleri: Kapsamlı İnceleme