Claude Code & Next.js: React-Framework für produktionsreife Web-Apps

Next.js ist das meistgenutzte React-Framework für produktionsreife Web-Applikationen. App Router, Server Components, file-based Routing, API Routes — das Ökosystem ist leistungsstark, aber auch komplex. Genau hier zahlt sich Claude Code besonders aus: das KI-Coding-Tool liest dein gesamtes Next.js-Projekt auf einmal, versteht den Unterschied zwischen Server- und Client-Komponenten und schreibt Code, der tatsächlich den Next.js-Konventionen folgt — nicht generisches React.

Dieser Artikel zeigt, was Next.js ausmacht, wie App Router und Pages Router sich unterscheiden, und wie Claude Code den Entwicklungsalltag mit Next.js konkret beschleunigt.

1. Was ist Next.js?

Next.js ist ein React-Framework von Vercel, das serverseitiges Rendering (SSR), Static Site Generation (SSG), Streaming und API-Endpunkte out of the box mitbringt. Während reines React nur eine UI-Library ist, gibt Next.js die gesamte Projektstruktur vor: Routing, Datenabruf, Build-Pipeline, Caching — alles integriert.

Seit Next.js 13 gibt es zwei parallele Welten: den App Router (empfohlen) und den Pages Router (Legacy, weiterhin unterstützt). Wer heute ein neues Projekt startet, sollte den App Router verwenden — er ist auf React Server Components aufgebaut und deutlich mächtiger.

2. File-based Routing, Dynamic Routes und Route Groups

Next.js leitet die URL-Struktur direkt aus dem Verzeichnisbaum ab — ohne manuelle Router-Konfiguration. Eine Datei app/blog/page.tsx erzeugt die Route /blog. Das ist simpel und intuitiv, skaliert aber auch für komplexe Strukturen.

Dynamische Routen

Parameter werden per eckiger Klammer definiert:

app/
  blog/
    [slug]/
      page.tsx    → /blog/mein-artikel
  users/
    [id]/
      [tab]/
        page.tsx  → /users/42/settings

Im Code greifst du auf die Parameter über params zu, das automatisch an die Seiten-Komponente übergeben wird:

// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: { slug: string }
}) {
  const post = await getPost(params.slug)
  return <article>{post.content}</article>
}

Route Groups

Verzeichnisse in runden Klammern (gruppe) gruppieren Routen, ohne die URL zu beeinflussen. Praktisch für unterschiedliche Layouts innerhalb derselben App:

app/
  (marketing)/
    page.tsx       → /
    about/page.tsx → /about
  (app)/
    dashboard/page.tsx → /dashboard
    settings/page.tsx  → /settings

3. Server Components vs. Client Components

Das ist das wichtigste Konzept im App Router: alle Komponenten sind standardmäßig Server Components. Sie rendern auf dem Server, senden fertiges HTML an den Client und enthalten kein JavaScript im Browser. Keine Hydration, kein Bundle-Overhead.

Nur wenn du Interaktivität brauchst — useState, useEffect, Event Handler, Browser-APIs — markierst du eine Komponente mit 'use client' am Anfang der Datei:

'use client'

import { useState } from 'react'

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

4. Data Fetching: fetch, Server Components und Streaming

Im App Router findet Data Fetching direkt in Server Components statt — kein getServerSideProps, kein API-Umweg. Du nutzt einfach async/await in der Komponente:

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // ISR: alle 60 Minuten neu bauen
  })
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  )
}

Next.js erweitert die native fetch-API um Cache-Kontrolle: cache: 'no-store' für immer aktuelle Daten, next: { revalidate: N } für Incremental Static Regeneration.

Streaming ist ebenfalls eingebaut: mit Suspense-Boundaries kannst du langsame Daten nachladen, während die Seite bereits teilweise sichtbar ist — ohne Extra-Konfiguration.

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <h1>Produkte</h1>
      <Suspense fallback={<p>Lädt...</p>}>
        <ProductList />  {/* wird gestreamt */}
      </Suspense>
    </>
  )
}

5. API Routes und Route Handlers

Next.js ersetzt einen separaten Backend-Server für viele Anwendungsfälle: Route Handlers (App Router) bzw. API Routes (Pages Router) erlauben dir, HTTP-Endpunkte direkt im Next.js-Projekt zu definieren.

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  const user = await db.user.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}

Route Handlers unterstützen alle HTTP-Methoden (GET, POST, PUT, DELETE, PATCH) und laufen in der Edge Runtime oder in Node.js — je nach Konfiguration.

6. Deployment: Vercel vs. Self-hosted

Next.js wurde von Vercel entwickelt und läuft dort am reibungslosesten: git push genügt, Preview-Deployments, Edge Network, automatisches ISR-Handling — alles ohne Konfiguration. Ideal für Teams ohne Ops-Kapazität.

Wer lieber selbst hostet, nutzt next build gefolgt von next start auf einem Node.js-Server oder Docker-Container. Das output: 'standalone'-Flag in next.config.js erzeugt ein minimales, portable Bundle ohne node_modules:

// next.config.js
module.exports = {
  output: 'standalone',
}

Alternativ: output: 'export' für vollständig statische Sites ohne Server-Anforderungen — ideal für CDN-Hosting, aber ohne SSR und API Routes.

7. Claude Code Tipps für Next.js

Komponenten generieren

Claude Code kennt die Next.js-Konventionen und generiert direkt korrekten Code. Kein "ist das eine Server oder Client Component?" — beschreibe einfach, was du brauchst:

claude "Erstelle eine Server Component für /app/blog/[slug]/page.tsx die den
Blogpost per Slug aus der Datenbank lädt, statisch rendered und eine
generateStaticParams-Funktion für die häufigsten 20 Posts enthält."

Claude Code liest dein Datenbankschema, folgt deinen bestehenden Patterns und schreibt TypeScript mit korrekten Typen — kein Copy-Paste aus der Doku nötig.

Next.js-Fehler debuggen

Typische Next.js-Fehler wie „You're importing a component that needs useState. It only works in a Client Component" oder Hydration-Mismatches sind für Claude Code leicht zu lösen — weil es den gesamten Komponentenbaum auf einmal sieht und direkt die Grenze findet, an der 'use client' fehlt oder falsch sitzt:

claude "Dieser Hydration-Error tritt auf: [Fehlermeldung].
Analysiere den Komponentenbaum und zeige wo der Server-/Client-
Unterschied entsteht."

"Das Problem liegt in Header.tsx: die Komponente nutzt usePathname() (Client-only Hook), ist aber nicht mit 'use client' markiert. Füge die Direktive in Zeile 1 hinzu und stelle sicher, dass der übergeordnete Layout.tsx sie als Client-Grenze behandelt."

API Routes und Route Handlers erstellen

Statt die Next.js-Doku nach der korrekten Response-Syntax zu durchsuchen, genügt eine kurze Beschreibung:

claude "Erstelle einen Route Handler unter app/api/newsletter/route.ts
der POST-Requests mit {email, name} empfängt, die Adresse in meiner
Resend-Liste speichert und bei Fehler einen 400-Status zurückgibt."

Claude Code liest deine bestehende .env-Konfiguration, erkennt welche SDK-Version du nutzt und schreibt den Handler mit korrektem Error-Handling — komplett einsatzbereit.

• Routing-Fragen klärst du, indem du die Verzeichnisstruktur übergibst — Claude Code sieht sofort, welche URLs daraus entstehen
• Performance-Probleme (zu großes JS-Bundle) analysiert Claude Code durch Lesen der Import-Kette — und schlägt direkt vor, wo eine dynamische import()-Grenze sinnvoll wäre
• Middleware schreiben für Auth, Geolocation oder A/B-Tests: Claude Code folgt den Next.js-Middleware-Konventionen ohne Nachfragen

Verwandte Artikel, die auf diesem Thema aufbauen:

• Claude Code Debugging — Bugs in Minuten finden, Stack Traces analysieren
• Claude Code & Vercel — Deployment-Workflows mit Claude Code automatisieren