Next.js 15 ile Web Uygulaması Geliştirme: Başlangıç Rehberi

Modern web dünyasında hız ve kullanıcı deneyimi her şeyden önce geliyor. Vercel tarafından geliştirilen popüler React framework'ünün en son sürümü olan Next.js 15, bu beklentileri karşılamak için devrim niteliğinde yeniliklerle geldi. Bu rehberimizde, Next.js 15 ile web uygulaması geliştirme sürecine adım atacak, yeni özelliklerini inceleyecek ve ilk projenizi nasıl hayata geçireceğinizi öğreneceğiz.

Next.js, uzun süredir React tabanlı projelerin vazgeçilmez bir parçası oldu. SSR (Sunucu Tarafı İşleme), SSG (Statik Site Oluşturma) ve hibrit çözümleriyle geliştiricilere esneklik sunan platform, 15. sürümüyle performans çıtasını daha da yukarı taşıyor. Özellikle React 19 desteği, yenilenen önbellekleme mekanizmaları ve kararlı hale gelen geliştirme araçları, bu sürümü web dünyası için kritik bir dönüm noktası yapıyor.

Next.js 15 ile Web Uygulaması Geliştirme Sürecindeki Yenilikler

Next.js 15, geliştirici deneyimini iyileştirmek ve son kullanıcıya en hızlı deneyimi sunmak amacıyla köklü değişikliklerle geldi. Projelerinize başlamadan önce bu yenilikleri anlamak, doğru mimariyi kurmanıza yardımcı olacaktır.

React Compiler Entegrasyonu

React ekibi tarafından geliştirilen ve kodunuzu otomatik olarak optimize eden React Compiler (React derleyicisi), Next.js 15 ile birlikte deneysel olarak desteklenmeye başlandı. Artık useMemo ve useCallback gibi hook'ları manuel olarak tanımlamanıza gerek kalmıyor. Derleyici, hangi bileşenlerin ne zaman yeniden çizilmesi (re-render) gerektiğini kendisi analiz ederek performansı en üst düzeye çıkarıyor.

Önbellekleme (Caching) Davranışında Değişiklikler

Önceki Next.js sürümlerinde fetch istekleri ve rota (route) işleyicileri varsayılan olarak önbelleğe alınıyordu. Bu durum bazen güncel olmayan verilerin gösterilmesine yol açabiliyordu. Next.js 15 ile birlikte bu felsefe tamamen değişti. Artık fetch istekleri, GET Rota İşleyicileri (Route Handlers) ve İstemci Tarafı Yönlendirmeler (Client-side Router Cache) varsayılan olarak önbelleğe alınmıyor (uncached). Eğer verilerin önbelleğe alınmasını istiyorsanız, bunu açıkça belirtmeniz gerekiyor. Bu değişiklik, dinamik veri yönetimini çok daha güvenli hale getiriyor.

Turbopack Artık Kararlı (Stable)

Geliştirme aşamasındaki derleme sürelerini ciddi oranda düşüren Turbopack, Next.js 15 ile birlikte artık tamamen kararlı sürüme ulaştı. Webpack'in yerini alan bu yeni nesil araç, projelerin ilk açılış (startup) ve hızlı yenileme (Fast Refresh) sürelerini %50'ye varan oranlarda hızlandırıyor.

Adım Adım İlk Next.js 15 Projesini Kurmak

Yeni bir projeye başlamak Next.js ekosisteminde her zaman çok pratik olmuştur. Terminalinizi açarak modern ve optimize bir web uygulaması için ilk adımı atabilirsiniz.

1. Kurulum

Bilgisayarında Node.js sürümünün güncel olduğundan emin olduktan sonra terminale şu komutu yazarak kurulumu başlatın:

npx create-next-app@latest

Bu komutu çalıştırdıktan sonra kurulum sihirbazı size bazı sorular yöneltecektir. Next.js 15'in tüm avantajlarından yararlanmak için şu yapılandırmayı seçmeniz önerilir:

• Project name: nextjs15-baslangic
• TypeScript: Yes (Kod güvenliği ve oto-tamamlama için şiddetle tavsiye edilir)
• ESLint: Yes
• Tailwind CSS: Yes (Hızlı arayüz tasarımı için)
• Src directory: Yes
• App Router: Yes (Next.js'in modern yönlendirme sistemi)
• Import alias: No veya varsayılan @/*

cd nextjs15-baslangic
npm run dev

Artık tarayıcınızda http://localhost:3000 adresine giderek çalışan ilk Next.js 15 uygulamanızı görebilirsiniz.

App Router ve Dosya Tabanlı Yönlendirme

Next.js 15, modern app dizini yapısını kullanır. Bu yapıda her klasör bir URL rotasını, klasör içindeki page.tsx dosyası ise o rotanın arayüzünü temsil eder.

Örneğin, uygulamanıza bir "Hakkımızda" sayfası eklemek istiyorsanız, src/app/ klasörü altında hakkimizda adında yeni bir klasör oluşturmalı ve içine page.tsx dosyasını eklemelisiniz:

// src/app/hakkimizda/page.tsx
export default function HakkimizdaPage() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">Hakkımızda</h1>
      <p className="mt-4 text-gray-600">
        Next.js 15 ile hızlı, modern ve SEO uyumlu web uygulamaları geliştiriyoruz.
      </p>
    </main>
  );
}

Bu basit yapı sayesinde karmaşık yönlendirme kütüphaneleriyle uğraşmadan, sadece klasör düzeniyle web sitenizin haritasını oluşturabilirsiniz.

Next.js 15'te Veri Çekme (Data Fetching)

Yeni sürümle birlikte gelen dinamik önbellekleme yapısı, veri çekme işlemlerini daha şeffaf hale getiriyor. Sunucu bileşenlerinde (Server Components) doğrudan async/await kullanarak veri çekebilirsiniz.

Aşağıdaki örnekte, harici bir API'den dinamik olarak veri çeken bir bileşen yer almaktadır:

// src/app/urunler/page.tsx
interface Urun {
  id: number;
  title: string;
  price: number;
}

async function getUrunler() {
  // Next.js 15'te varsayılan olarak önbelleğe alınmaz.
  // Önbelleğe almak için: fetch(url, { cache: 'force-cache' })
  const res = await fetch('https://api.escuelajs.co/api/v1/products?limit=5');
  if (!res.ok) {
    throw new Error('Veriler yüklenirken bir hata oluştu');
  }
  return res.json();
}

export default async function UrunlerPage() {
  const urunler: Urun[] = await getUrunler();

  return (
    <main className="p-8">
      <h2 className="text-2xl font-bold mb-6">Ürün Listesi</h2>
      <ul className="space-y-4">
        {urunler.map((urun) => (
          <li key={urun.id} className="p-4 border rounded shadow-sm">
            <h3 className="font-semibold">{urun.title}</h3>
            <p className="text-green-600 font-medium">{urun.price} TL</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

Server Actions ile Form Yönetimi ve Güvenlik

Next.js 15, istemci ile sunucu arasındaki veri iletimini kolaylaştıran Server Actions (Sunucu Eylemleri) özelliğini daha güvenli hale getiriyor. Artık form gönderimleri veya veri tabanı işlemleri için harici API endpoint'leri yazmanıza gerek kalmıyor.

React 19 ile entegre çalışan useActionState hook'u sayesinde form durumlarını (yükleniyor, hata, başarı) kolayca yönetebilirsiniz. Ayrıca Next.js 15, kullanılmayan eylemlerin dışarıdan çağrılmasını önlemek için otomatik olarak benzersiz kimlikler (ID) oluşturarak güvenliği artırır.

Güvenlik İpucu: Sunucu eylemlerinin sadece sunucu tarafında çalıştırılacağından emin olmak için dosyanın en üstüne mutlaka 'use server'; direktifini eklemeyi unutmayın.

Sonuç ve Özet

Next.js 15, modern web standartlarını yeniden şekillendiriyor. React 19'un gücünü arkasına alan framework; geliştirilmiş derleme hızları, esnek önbellekleme stratejileri ve güvenli sunucu eylemleriyle hem geliştiriciler hem de son kullanıcılar için kusursuz bir deneyim sunuyor.

Eğer siz de projelerinizi geleceğe taşımak ve optimize performans elde etmek istiyorsanız, resmi Next.js Web Sitesi üzerindeki belgeleri inceleyerek hemen ilk uygulamanızı geliştirmeye başlayabilirsiniz.