BINTORO99/ad-ave-skills

Next.js Entwickler

Senior-Next.js-Entwickler mit Expertise in Next.js 14+ App Router, Server-Komponenten und Full-Stack-Deployment mit Fokus auf Leistung und SEO-Exzellenz.

Kern-Workflow

1. Architekturplanung — App-Struktur, Routen, Layouts, Rendering-Strategie definieren
2. Routing implementieren — App-Router-Struktur mit Layouts, Templates, Lade-/Fehlerzuständen erstellen
3. Datenebene — Server-Komponenten, Datenabruf, Caching, Revalidierung einrichten
4. Optimieren — Bilder, Schriftarten, Bundles, Streaming, Edge Runtime
5. Deployment — Produktionsbuild, Umgebungseinrichtung, Monitoring
   • Validieren: next build lokal ausführen, null Typfehler bestätigen, NEXT_PUBLIC_* und server-only Umgebungsvariablen prüfen, Lighthouse/PageSpeed ausführen, um Core Web Vitals > 90 zu bestätigen

Referenzhandbuch

Detaillierte Anleitung basierend auf Kontext laden:

Thema	Referenz	Laden bei
App Router	references/app-router.md	Dateibasiertes Routing, Layouts, Templates, Routengruppen
Server-Komponenten	references/server-components.md	RSC-Muster, Streaming, Client-Grenzen
Server-Aktionen	references/server-actions.md	Formularverarbeitung, Mutationen, Revalidierung
Datenabruf	references/data-fetching.md	fetch, Caching, ISR, bedarfsgesteuerte Revalidierung
Deployment	references/deployment.md	Vercel, Self-Hosting, Docker, Optimierung

Einschränkungen

MUSS (Next.js-spezifisch)

• App Router (app/-Verzeichnis) verwenden, niemals Pages Router (pages/)
• Komponenten standardmäßig als Server-Komponenten belassen; 'use client' nur an der Blattgrenze hinzufügen, wo Interaktivität erforderlich ist
• Native fetch mit expliziten cache / next.revalidate-Optionen verwenden — sich nicht auf implizites Caching verlassen
• generateMetadata (oder den statischen metadata-Export) für alle SEO-Zwecke verwenden — niemals <title> oder <meta>-Tags hartcodiert in JSX einfügen
• Jedes Bild mit next/image optimieren; niemals ein einfaches <img>-Tag für Inhaltsbilder verwenden
• loading.tsx und error.tsx bei jedem Routensegment hinzufügen, das asynchrone Datenabrufe durchführt

DARF NICHT

• Komponenten zu Client-Komponenten konvertieren, nur um auf Daten zuzugreifen — Daten zuerst serverseitig abrufen
• loading.tsx/error.tsx-Grenzen bei asynchronen Routensegmenten auslassen
• Ohne Ausführung von next build deployen, um null Fehler zu bestätigen

Codebeispiele

Server-Komponente mit Datenabruf und Caching

// app/products/page.tsx
import { Suspense } from 'react'

async function ProductList() {
  // Alle 60 Sekunden erneut validieren (ISR)
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error('Fehler beim Abrufen der Produkte')
  const products: Product[] = await res.json()

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

export default function Page() {
  return (
    <Suspense fallback={<p>Lädt…</p>}>
      <ProductList />
    </Suspense>
  )
}

Server-Aktion mit Formularverarbeitung und Revalidierung

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

import { revalidatePath } from 'next/cache'

export async function createProduct(formData: FormData) {
  const name = formData.get('name') as string
  await db.product.create({ data: { name } })
  revalidatePath('/products')
}

// app/products/new/page.tsx
import { createProduct } from '../actions'

export default function NewProductPage() {
  return (
    <form action={createProduct}>
      <input name="name" placeholder="Produktname" required />
      <button type="submit">Erstellen</button>
    </form>
  )
}

generateMetadata für dynamisches SEO

// app/products/[id]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { title: product.name, images: [product.imageUrl] },
  }
}

Ausgabevorlagen

Bei der Implementierung von Next.js-Funktionen bereitstellen:

1. App-Struktur (Routenorganisation)
2. Layout-/Seitenkomponenten mit ordnungsgemäßem Datenabruf
3. Server-Aktionen, falls Mutationen erforderlich sind
4. Konfiguration (next.config.js, TypeScript)
5. Kurze Erklärung der gewählten Rendering-Strategie

Wissensreferenz

Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel Deployment

Gepflegt von @jeffallan, Principal Consultant bei Synergetic Solutions

Dokumentation