Next.js 14 ile Modern Web Uygulamaları

Next.js, React ekosisteminin en güçlü framework'lerinden biri haline geldi. Versiyon 14 ile gelen yenilikler, web geliştirme deneyimini bir üst seviyeye taşıyor.

App Router Nedir?

App Router, Next.js 13 ile tanıtılan ve 14'te olgunlaşan yeni yönlendirme sistemidir. Geleneksel Pages Router'ın yerine geçerek daha güçlü özellikler sunar:

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  return <article>{post.content}</article>;
}

Temel Avantajları

| Özellik | Pages Router | App Router | |---------|-------------|------------| | Layouts | Sınırlı | İç içe destekli | | Data Fetching | getServerSideProps | async/await | | Streaming | Yok | Tam destek | | Server Components | Yok | Varsayılan |

Server Components

React Server Components (RSC), bileşenlerin sunucuda render edilmesini sağlar. Bu sayede:

• Daha az JavaScript gönderilir
• Daha hızlı ilk sayfa yüklenmesi
• Doğrudan veritabanı erişimi mümkün

// Bu bileşen sunucuda çalışır
export default async function PostList() {
  const posts = await db.posts.findMany();
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Streaming SSR

Streaming, sayfanın parça parça gönderilmesini sağlar. Kullanıcı tüm veri yüklenmeden sayfayı görmeye başlar:

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Sayfa Başlığı</h1>
      <Suspense fallback={<Loading />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Performans Karşılaştırması

Next.js 14 ile elde edilen iyileştirmeler:

• 53% daha hızlı yerel sunucu başlatma
• 94% daha hızlı kod güncellemeleri (Fast Refresh)
• Azaltılmış bundle boyutu

Sonuç

Next.js 14, modern web geliştirme için güçlü araçlar sunuyor. App Router, Server Components ve Streaming SSR gibi özellikler, hem geliştirici deneyimini hem de kullanıcı deneyimini önemli ölçüde iyileştiriyor.

Bir sonraki yazıda Next.js 14 ile bir blog nasıl oluşturulur, adım adım anlatacağım.