⚛️ Next.js Specialist

Next.js 15 App Router ve Server Components rehberi.

---

📋 İçindekiler

1. App Router Temelleri
2. Server vs Client Components
3. Data Fetching
4. Rendering Stratejileri
5. Optimizasyon

---

1. App Router Temelleri

Dosya Yapısı

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page (/)
├── loading.tsx         # Loading UI
├── error.tsx           # Error boundary
├── not-found.tsx       # 404 page
├── globals.css
│
├── (marketing)/        # Route group (URL'de görünmez)
│   ├── about/
│   │   └── page.tsx    # /about
│   └── contact/
│       └── page.tsx    # /contact
│
├── dashboard/
│   ├── layout.tsx      # Nested layout
│   ├── page.tsx        # /dashboard
│   └── settings/
│       └── page.tsx    # /dashboard/settings
│
├── blog/
│   ├── page.tsx        # /blog
│   └── [slug]/
│       └── page.tsx    # /blog/:slug (dynamic)
│
└── api/
    └── users/
        └── route.ts    # API route

Special Files

Dosya	Amaç
layout.tsx	Shared layout, state korunur
page.tsx	Unique route content
loading.tsx	Suspense fallback
error.tsx	Error boundary
not-found.tsx	404 handler
route.ts	API endpoint

---

2. Server vs Client Components

Server Components (Default)

// app/users/page.tsx
// ✅ Server Component - 'use client' yok

async function UsersPage() {
  const users = await db.users.findMany(); // Direkt DB erişimi
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersPage;

Client Components

'use client'; // ⚠️ Dosyanın en üstünde

import { useState } from 'react';

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

Composition Pattern

// Server Component
import { Counter } from './Counter'; // Client Component

async function Dashboard() {
  const data = await fetchData(); // Server'da çalışır
  
  return (
    <div>
      <h1>{data.title}</h1>
      <Counter /> {/* Client Component */}
    </div>
  );
}

Ne Zaman Hangisi?

Server Component	Client Component
Data fetching	Interactivity (onClick, onChange)
Backend erişimi	Browser API (localStorage)
Sensitive logic	Hooks (useState, useEffect)
Büyük dependencies	Event listeners

---

3. Data Fetching

Server Components

// Otomatik cache
async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}

// Cache control
const res = await fetch(url, {
  cache: 'force-cache', // Default - cache
  // cache: 'no-store',  // Her request'te fresh
  // next: { revalidate: 60 }, // ISR - 60 saniye
});

Server Actions

// app/actions.ts
'use server';

export async function createUser(formData: FormData) {
  const name = formData.get('name');
  await db.users.create({ data: { name } });
  revalidatePath('/users');
}

// app/users/page.tsx
import { createUser } from './actions';

export default function Page() {
  return (
    <form action={createUser}>
      <input name="name" />
      <button type="submit">Create</button>
    </form>
  );
}

---

4. Rendering Stratejileri

Static (SSG)

// Default - build time'da generate
export default function Page() {
  return <h1>Static Page</h1>;
}

// Dynamic segments için
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Dynamic (SSR)

// Her request'te render
export const dynamic = 'force-dynamic';

export default async function Page() {
  const data = await fetchRealTimeData();
  return <div>{data.value}</div>;
}

Incremental Static Regeneration (ISR)

export const revalidate = 60; // 60 saniye

export default async function Page() {
  const data = await fetchData();
  return <div>{data.value}</div>;
}

---

5. Optimizasyon

Image Optimization

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // LCP için
  placeholder="blur"
  blurDataURL="data:image/..."
/>

Font Optimization

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

export default function Layout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Metadata

// Static
export const metadata = {
  title: 'My App',
  description: 'App description',
};

// Dynamic
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    openGraph: { images: [post.image] },
  };
}

Parallel Routes

app/
├── @modal/
│   └── login/page.tsx
├── @sidebar/
│   └── page.tsx
└── layout.tsx

// layout.tsx
export default function Layout({ children, modal, sidebar }) {
  return (
    <>
      {sidebar}
      {children}
      {modal}
    </>
  );
}

---

Next.js Specialist v1.1 - Enhanced

🔄 Workflow

Kaynak: Next.js App Router Documentation & Vercel Security Guide

Aşama 1: Rendering Strategy

• Default to Server: Her component'e varsayılan olarak Server Component muamelesi yap.
• Isolate Client: Sadece etkileşim (useState, onClick) gereken yaprak (leaf) nodları Client Component yap.
• Streaming: Suspense sınırlarını belirle ve loading.tsx dosyalarını oluştur.

Aşama 2: Data & Actions

• Fetch: Veri çekme işlemlerini Server Component içinde yap (Waterfall'u önlemek için Promise.all kullan).
• Actions: Form işlemleri için Server Actions kullan ve Zod ile input validasyonu yap.
• Security: Server Action'larda authentication ve authorization kontrolünü manuel yap (auth() çağır).

Aşama 3: Performance (Core Web Vitals)

• Images: next/image kullan ve sizes prop'unu doğru ayarla.
• Fonts: next/font ile fontları optimize et (Layout shift'i önler).
• Scripts: 3. parti scriptleri next/script ve strategy="lazyOnload" ile yükle.

Kontrol Noktaları

Aşama	Doğrulama
1	"Hydration Error" alıyor musun? (Server/Client HTML uyuşmazlığı)
2	LCP (Largest Contentful Paint) < 2.5s mi?
3	Hassas veriler (API Key) Client bundle'a sızıyor mu?