Samueladewole/claude-skills

Next.js App Router Patterns

Umfassende Patterns für Next.js 14+ App Router Architektur, Server-Komponenten und moderne Full-Stack React-Entwicklung.

Wann dieses Skill verwendet werden sollte

• Erstellen neuer Next.js-Anwendungen mit App Router
• Migration vom Pages Router zum App Router
• Implementieren von Server-Komponenten und Streaming
• Einrichten paralleler und abfangender Routen
• Optimieren von Datenabruf und Caching
• Erstellen von Full-Stack-Funktionen mit Server Actions

Kernkonzepte

1. Rendering-Modi

Modus	Wo	Wann verwenden
Server Components	Nur Server	Datenabruf, schwere Berechnungen, Geheimnisse
Client Components	Browser	Interaktivität, Hooks, Browser-APIs
Statisch	Build-Zeit	Inhalte, die sich selten ändern
Dynamisch	Request-Zeit	Personalisierte oder Echtzeit-Daten
Streaming	Progressiv	Große Seiten, langsame Datenquellen

2. Dateikonventionen

app/
├── layout.tsx       # Gemeinsamer UI-Wrapper
├── page.tsx         # Routen-UI
├── loading.tsx      # Lade-UI (Suspense)
├── error.tsx        # Fehlerbegrenzung
├── not-found.tsx    # 404-UI
├── route.ts         # API-Endpunkt
├── template.tsx     # Neu-gemountetes Layout
├── default.tsx      # Parallel-Routen-Fallback
└── opengraph-image.tsx  # OG-Bildgenerierung

Schnellstart

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

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: { default: 'My App', template: '%s | My App' },
  description: 'Built with Next.js App Router',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/page.tsx - Server Component by default
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: jede Stunde neu validieren
  })
  return res.json()
}

export default async function HomePage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}

Patterns

Pattern 1: Server-Komponenten mit Datenabruf

// app/products/page.tsx
import { Suspense } from 'react'
import { ProductList, ProductListSkeleton } from '@/components/products'
import { FilterSidebar } from '@/components/filters'

interface SearchParams {
  category?: string
  sort?: 'price' | 'name' | 'date'
  page?: string
}

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}) {
  const params = await searchParams

  return (
    <div className="flex gap-8">
      <FilterSidebar />
      <Suspense
        key={JSON.stringify(params)}
        fallback={<ProductListSkeleton />}
      >
        <ProductList
          category={params.category}
          sort={params.sort}
          page={Number(params.page) || 1}
        />
      </Suspense>
    </div>
  )
}

// components/products/ProductList.tsx - Server Component
async function getProducts(filters: ProductFilters) {
  const res = await fetch(
    `${process.env.API_URL}/products?${new URLSearchParams(filters)}`,
    { next: { tags: ['products'] } }
  )
  if (!res.ok) throw new Error('Failed to fetch products')
  return res.json()
}

export async function ProductList({ category, sort, page }: ProductFilters) {
  const { products, totalPages } = await getProducts({ category, sort, page })

  return (
    <div>
      <div className="grid grid-cols-3 gap-4">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
      <Pagination currentPage={page} totalPages={totalPages} />
    </div>
  )
}

Pattern 2: Client-Komponenten mit 'use client'

// components/products/AddToCartButton.tsx
'use client'

import { useState, useTransition } from 'react'
import { addToCart } from '@/app/actions/cart'

export function AddToCartButton({ productId }: { productId: string }) {
  const [isPending, startTransition] = useTransition()
  const [error, setError] = useState<string | null>(null)

  const handleClick = () => {
    setError(null)
    startTransition(async () => {
      const result = await addToCart(productId)
      if (result.error) {
        setError(result.error)
      }
    })
  }

  return (
    <div>
      <button
        onClick={handleClick}
        disabled={isPending}
        className="btn-primary"
      >
        {isPending ? 'Adding...' : 'Add to Cart'}
      </button>
      {error && <p className="text-red-500 text-sm">{error}</p>}
    </div>
  )
}

Pattern 3: Server Actions

// app/actions/cart.ts
"use server";

import { revalidateTag } from "next/cache";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export async function addToCart(productId: string) {
  const cookieStore = await cookies();
  const sessionId = cookieStore.get("session")?.value;

  if (!sessionId) {
    redirect("/login");
  }

  try {
    await db.cart.upsert({
      where: { sessionId_productId: { sessionId, productId } },
      update: { quantity: { increment: 1 } },
      create: { sessionId, productId, quantity: 1 },
    });

    revalidateTag("cart");
    return { success: true };
  } catch (error) {
    return { error: "Failed to add item to cart" };
  }
}

export async function checkout(formData: FormData) {
  const address = formData.get("address") as string;
  const payment = formData.get("payment") as string;

  // Validate
  if (!address || !payment) {
    return { error: "Missing required fields" };
  }

  // Process order
  const order = await processOrder({ address, payment });

  // Redirect to confirmation
  redirect(`/orders/${order.id}/confirmation`);
}

Pattern 4: Parallele Routen

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div className="dashboard-grid">
      <main>{children}</main>
      <aside className="analytics-panel">{analytics}</aside>
      <aside className="team-panel">{team}</aside>
    </div>
  )
}

// app/dashboard/@analytics/page.tsx
export default async function AnalyticsSlot() {
  const stats = await getAnalytics()
  return <AnalyticsChart data={stats} />
}

// app/dashboard/@analytics/loading.tsx
export default function AnalyticsLoading() {
  return <ChartSkeleton />
}

// app/dashboard/@team/page.tsx
export default async function TeamSlot() {
  const members = await getTeamMembers()
  return <TeamList members={members} />
}

Pattern 5: Abfangende Routen (Modal-Pattern)

// Dateistruktur für Foto-Modal
// app/
// ├── @modal/
// │   ├── (.)photos/[id]/page.tsx  # Abfangen
// │   └── default.tsx
// ├── photos/
// │   └── [id]/page.tsx            # Vollständige Seite
// └── layout.tsx

// app/@modal/(.)photos/[id]/page.tsx
import { Modal } from '@/components/Modal'
import { PhotoDetail } from '@/components/PhotoDetail'

export default async function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const photo = await getPhoto(id)

  return (
    <Modal>
      <PhotoDetail photo={photo} />
    </Modal>
  )
}

// app/photos/[id]/page.tsx - Vollständige Seitenversion
export default async function PhotoPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const photo = await getPhoto(id)

  return (
    <div className="photo-page">
      <PhotoDetail photo={photo} />
      <RelatedPhotos photoId={id} />
    </div>
  )
}

// app/layout.tsx
export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (
    <html>
      <body>
        {children}
        {modal}
      </body>
    </html>
  )
}

Pattern 6: Streaming mit Suspense

// app/product/[id]/page.tsx
import { Suspense } from 'react'

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params

  // Diese Daten werden zuerst geladen (blockierend)
  const product = await getProduct(id)

  return (
    <div>
      {/* Sofortiges Rendern */}
      <ProductHeader product={product} />

      {/* Reviews streamen */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>

      {/* Empfehlungen streamen */}
      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={id} />
      </Suspense>
    </div>
  )
}

// Diese Komponenten holen ihre eigenen Daten
async function Reviews({ productId }: { productId: string }) {
  const reviews = await getReviews(productId) // Langsame API
  return <ReviewList reviews={reviews} />
}

async function Recommendations({ productId }: { productId: string }) {
  const products = await getRecommendations(productId) // ML-basiert, langsam
  return <ProductCarousel products={products} />
}

Pattern 7: Route Handler (API-Routen)

// app/api/products/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const category = searchParams.get("category");

  const products = await db.product.findMany({
    where: category ? { category } : undefined,
    take: 20,
  });

  return NextResponse.json(products);
}

export async function POST(request: NextRequest) {
  const body = await request.json();

  const product = await db.product.create({
    data: body,
  });

  return NextResponse.json(product, { status: 201 });
}

// app/api/products/[id]/route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });

  if (!product) {
    return NextResponse.json({ error: "Product not found" }, { status: 404 });
  }

  return NextResponse.json(product);
}

Pattern 8: Metadaten und SEO

// app/products/[slug]/page.tsx
import { Metadata } from 'next'
import { notFound } from 'next/navigation'

type Props = {
  params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const product = await getProduct(slug)

  if (!product) return {}

  return {
    title: product.name,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: [{ url: product.image, width: 1200, height: 630 }],
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      description: product.description,
      images: [product.image],
    },
  }
}

export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { slug: true } })
  return products.map((p) => ({ slug: p.slug }))
}

export default async function ProductPage({ params }: Props) {
  const { slug } = await params
  const product = await getProduct(slug)

  if (!product) notFound()

  return <ProductDetail product={product} />
}

Caching-Strategien

Daten-Cache

// Kein Cache (immer aktuell)
fetch(url, { cache: "no-store" });

// Für immer cachen (statisch)
fetch(url, { cache: "force-cache" });

// ISR - nach 60 Sekunden neu validieren
fetch(url, { next: { revalidate: 60 } });

// Tag-basierte Invalidierung
fetch(url, { next: { tags: ["products"] } });

// Via Server Action invalidieren
("use server");
import { revalidateTag, revalidatePath } from "next/cache";

export async function updateProduct(id: string, data: ProductData) {
  await db.product.update({ where: { id }, data });
  revalidateTag("products");
  revalidatePath("/products");
}

Best Practices

Do's

• Beginne mit Server-Komponenten - Füge 'use client' nur hinzu, wenn nötig
• Datenabruf zusammenfassen - Rufe Daten dort ab, wo sie verwendet werden
• Suspense-Grenzen nutzen - Aktiviere Streaming für langsame Daten
• Parallele Routen einsetzen - Unabhängige Ladezustände
• Server Actions verwenden - Für Mutationen mit progressiver Verbesserung

Don'ts

• Nicht serialisierbare Daten übergeben - Grenzen zwischen Server und Client
• Keine Hooks in Server-Komponenten verwenden - Kein useState, useEffect
• Nicht in Client-Komponenten abrufen - Verwende Server-Komponenten oder React Query
• Layouts nicht zu tief verschachteln - Jedes Layout fügt dem Komponentenbaum hinzu
• Ladezustände nicht ignorieren - Stelle immer loading.tsx oder Suspense bereit

Ressourcen

• Next.js App Router Dokumentation
• Server Components RFC
• Vercel Vorlagen