Next.js 15 ile Modern Web Uygulaması Geliştirme

Next.js 15, web geliştirme dünyasında önemli bir milestone. App Router'ın olgunlaşması, Server Components'ın yaygınlaşması ve performans iyileştirmeleriyle birlikte artık üretim ortamları için sağlam bir tercih.

App Router Neden Önemli?

Pages Router'dan App Router'a geçiş sadece bir dosya yapısı değişikliği değil — bir paradigma kayması.

Server Components: Varsayılan Olarak Sunucu Tarafı

// Bu bileşen sunucuda çalışır, client'a JS göndermez
async function UserProfile({ userId }: { userId: string }) {
  const user = await db.users.findById(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Faydaları:

Daha az JavaScript bundle boyutu
Daha hızlı sayfa yükleme
SEO dostu içerik
Güvenli API anahtarı kullanımı

Client Components: Sadece Gerektiğinde

"use client";

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Sayı: {count}
    </button>
  );
}

Next.js 15'de Kritik Değişiklik: Async Params

// Yeni (v15) - params artık Promise
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <div>{slug}</div>;
}

Performans İpuçları

Image Optimization: Next.js <Image> bileşenini kullanın
Font Optimization: next/font ile Google Fonts yükleyin
Caching: unstable_cache veya revalidateTag kullanın

Sonuç

Next.js 15, doğru kullanıldığında gerçekten performanslı ve ölçeklenebilir uygulamalar üretmenizi sağlar. App Router'ı benimsemek başta zor gelse de uzun vadede büyük avantajlar sağlıyor.