Agent skill

nextjs-specialist

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nextjs-specialist

SKILL.md

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

tsx
// 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

tsx
'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

tsx
// 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

tsx
// 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

tsx
// 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)

tsx
// 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)

tsx
// 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)

tsx
export const revalidate = 60; // 60 saniye

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

5. Optimizasyon

Image Optimization

tsx
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

tsx
// 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

tsx
// 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
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?

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results