Next.js 16 App Router: Kapsamlı Rehber

Next.js 16, web geliştirme dünyasında devrim yaratan özellikleriyle ön plana çıkıyor. Bu yazıda, App Router'ın temel kavramlarını ve en iyi uygulamalarını inceleyeceğiz.

Server Components Nedir?

Server Components, React 18 ile tanıtılan ve Next.js 13+ ile popüler hale gelen bir kavramdır. Bu bileşenler sunucu tarafında render edilir ve client'a sadece HTML olarak gönderilir.

Avantajları:

• Daha az JavaScript: Client'a gönderilen JS miktarı azalır.
• Doğrudan veritabanı erişimi: API katmanı olmadan veritabanı sorguları yapılabilir.
• Gizli API anahtarları: Hassas bilgiler client'a gönderilmez.

Client Components

'use client' direktifi ile belirlenen bileşenler tarayıcıda çalışır. Etkileşimli özellikler için kullanılır.

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Routing Yapısı

App Router, dosya sistemi tabanlı routing kullanır:

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

Sonuç

Next.js 16 App Router, modern web uygulamaları geliştirmek için güçlü bir temel sunar. Server ve Client bileşenlerinin doğru kullanımı, performans ve kullanıcı deneyimi açısından büyük fark yaratır.