Next.js 14 App Router ile Modern Web Geliştirme: Kapsamlı Başlangıç

Vercel tarafından geliştirilen Next.js, React tabanlı projeler oluşturmanın de-facto standardı haline geldi. Özellikle 13. sürümle tanıtılan ve 14 ile stabil hale gelen App Router yapısı, "Server Components" konseptiyle webin çalışma mantığını temelden değiştiriyor.

Server Components ve İstemci Bileşenleri

Artık her React bileşeni varsayılan olarak sunucuda çalışır. Bu sayede veritabanı sorgularınızı bileşenin tam içinde yazabilirsiniz. İstemci tarafında interaktiviteye (örneğin buton tıklaması, state kullanımı) ihtiyaç duyduğunuz yerlerde ise dosyanın en üstüne 'use client' direktifini eklersiniz.

// Sadece sunucuda çalışan bileşen (Veritabanına doğrudan erişir)
import db from '@/lib/db';
import Button from './Button'; // use client olan bir bileşen

export default async function Dashboard() {
  const users = await db.query('SELECT * FROM users');
  
  return (
    <div>
      <h1>Kullanıcılar</h1>
      <ul>
        {users.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
      <Button />
    </div>
  );
}

Performans ve SEO Avantajı

JavaScript yükünün (bundle size) azalması sayesinde sayfalarınız anında yüklenir. Google botları, sayfanın HTML çıktısını doğrudan okuduğu için SEO puanınız tavan yapar. Daha az yükleme süresi, daha düşük çıkma oranı (bounce rate) ve dolayısıyla daha fazla organik trafik demektir.