Nextjs Specialist

name: nextjs_specialist router_kit: DevOpsKit description: Next.js 15 App Router, Server Components, SSR/SSG optimizasyonu ve modern Next.js best practices. metadata: skillport: category: development tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, fullstack, html5, javascript, libraries, nextjs specialist, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui/ux, web development] - app-router

⚛️ 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

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 => 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?

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ı