Next.js 16 App Router: Kapsamli Rehber

Next.js 16, web gelistirme dunyasinda devrim yaratan ozellikleriyle ön plana cikiyor. Bu yazida, App Router'in temel kavramlarini ve en iyi uygulamalarini inceleyecegiz.

Server Components Nedir?

Server Components, React 18 ile tanitilan ve Next.js 13+ ile populer hale gelen bir kavramdir. Bu komponenetler sunucu tarafinda render edilir ve client'a sadece HTML olarak gonderilir.

Avantajlari:

Client Components

'use client' direktifi ile belirlenen komponentler browser'da calisir. Interaktif ozellikler icin kullanilir.

'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
     setCount(c => c + 1)}>
      Count: {count}
    
  );
}

Routing Yapisi

App Router, dosya sistemi tabanli routing kullanir:

app/
├── page.tsx          # / (Ana sayfa)
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/[slug]
└── api/
    └── contact/
        └── route.ts  # API endpoint

Sonuc

Next.js 16 App Router, modern web uygulamalari gelistirmek icin guclu bir temel sunar. Server ve Client komponentlerin dogru kullanimi, performans ve kullanici deneyimi acisindan buyuk fark yaratir.