Next.js 15 App Router ve Server Components

İki Dünya: Server ve Client

Next.js App Router, React\'ı iki ortamda çalıştırır:

"use client" Direktifi

Varsayılan olarak tüm bileşenler Server Component\'tır. Client Component yapmak için dosyanın en üstüne ekleyin:

"use client";

import { useState } from "react";

export default function Sayac() {
  const [sayi, setSayi] = useState(0);

  return (
    <div>
      <p>Sayaç: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Artır</button>
    </div>
  );
}

Kompozisyon Deseni

Server Component içine Client Component yerleştirebilirsiniz (tam tersi olmaz):

// app/sayfa.tsx — Server Component
import Sayac from "@/components/Sayac"; // Client Component
import { veriCek } from "@/lib/api";

export default async function Sayfa() {
  const veri = await veriCek(); // Server'da çalışır

  return (
    <div>
      <h1>{veri.baslik}</h1>
      <Sayac /> {/* Client Component */}
    </div>
  );
}

Yaygın Hatalar

// ❌ YANLIŞ — Server Component'ta çalışmaz
export default async function Sayfa() {
  const [acik, setAcik] = useState(false); // HATA!
  return <div>...</div>;
}

Ne Zaman Hangisi?

• Server Component kullanın: Veri çekme, DB sorgusu, API anahtarları, statik içerik
• Client Component kullanın: onClick/onChange, useState/useEffect, tarayıcı API\'leri (localStorage, window), animasyonlar