Next.js & Fullstack 2. Mai 2026 12 min Lesezeit

Claude Code + Next.js: Fullstack-Apps mit AI beschleunigen 2026

Next.js App Router hat die Komplexität erhöht: Server Components, Client Components, Server Actions, Streaming — das sind viele neue Konzepte. Claude Code navigiert sie sicher und erklärt beim Generieren warum welches Pattern verwendet wird.

Server vs. Client Component: Die wichtigste Entscheidung

Mit Claude Code kannst du diese Entscheidung beschreiben lassen — aber du musst die Grundregel verstehen:

Nutze Server Component wenn...	Nutze Client Component wenn...
Datenbankzugriff direkt nötig	useState / useEffect nötig
Sensible Daten (API Keys) nicht im Client	Event Listener (onClick, onChange)
Kein Interaktivität nötig	Browser APIs (localStorage, Geolocation)
Großes Dependency das nur server-seitig läuft	Realtime-Updates (WebSocket, SSE)

Claude Code Prompt: "Erstelle diese Komponente. Erkläre in einem Kommentar oben warum Server oder Client Component und welche Teile ggf. aufgeteilt werden müssen."

App Router Strukturierung

Next.jsFeature-basierte Ordnerstruktur

# Prompt:
# "Erstelle eine App Router Struktur für eine SaaS-App:
# - Marketing-Seiten (/, /pricing, /about)
# - Auth-Seiten (/login, /signup, /forgot-password)
# - Dashboard (geschützt, /dashboard/...)
# - API-Routes für externe Zugriffe"

app/
├── (marketing)/           # Route Group — kein URL-Segment
│   ├── page.tsx            # / (Landing)
│   ├── pricing/page.tsx
│   └── layout.tsx          # Marketing Layout
├── (auth)/
│   ├── login/page.tsx
│   ├── signup/page.tsx
│   └── layout.tsx          # Minimal Auth Layout
├── dashboard/
│   ├── layout.tsx           # Protected Layout (Auth-Check)
│   ├── page.tsx
│   ├── settings/page.tsx
│   └── [teamId]/           # Dynamic Route
│       └── page.tsx
├── api/
│   ├── webhooks/stripe/route.ts
│   └── v1/users/route.ts
└── middleware.ts            # Auth-Guard für /dashboard

Server Actions mit Claude Code

Server ActionForm-Handling ohne API-Route

# Prompt: "Erstelle Server Action für User-Profil-Update:
# - Zod-Validierung, Fehler zurückgeben
# - Revalidate Cache nach Update
# - Optimistic Update im Client"

# app/dashboard/profile/actions.ts
'use server'

import { revalidatePath } from 'next/cache';
import { z } from 'zod';
import { auth } from '@/lib/auth';

const ProfileSchema = z.object({
  name: z.string().min(2).max(50),
  bio: z.string().max(500).optional(),
});

export async function updateProfile(formData: FormData) {
  const session = await auth();
  if (!session) return { error: 'Unauthorized' };

  const parsed = ProfileSchema.safeParse({
    name: formData.get('name'),
    bio: formData.get('bio'),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await db.users.update(session.user.id, parsed.data);
  revalidatePath('/dashboard/profile');
  return { success: true };
}

Middleware für Authentication

# middleware.ts — Alles unter /dashboard schützen
import { NextRequest, NextResponse } from 'next/server';
import { verifyToken } from '@/lib/auth';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('session')?.value;

  if (!token || !await verifyToken(token)) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('callbackUrl', request.nextUrl.pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/v1/:path*']
};

Streaming mit Suspense

# Langsame Daten streamen statt auf alles warten
# Prompt: "Implementiere Streaming für Dashboard mit Suspense Boundaries"

import { Suspense } from 'react';

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* Sofort rendern */}
      <QuickStats />

      {/* Streamen — zeigt Skeleton bis Daten da */}
      <Suspense fallback={<RevenueChartSkeleton />}>
        <RevenueChart />  {/* async Server Component */}
      </Suspense>

      <Suspense fallback={<ActivityFeedSkeleton />}>
        <ActivityFeed />
      </Suspense>
    </div>
  );
}

// RevenueChart kann await-en ohne alles zu blockieren:
async function RevenueChart() {
  const data = await db.getRevenueData(); // kann 2s dauern
  return <Chart data={data} />;
}

Vorsicht bei 'use client' vs. 'use server'. Claude Code platziert diese Direktiven korrekt — prüfe aber immer ob sensible Daten (DB-Credentials, API-Keys) in Client Components landen. Das passiert bei falscher Direktiven-Platzierung.

Next.js Fullstack im Kurs

Im Claude Code Mastery Kurs gibt es ein Next.js-Modul: App Router, Server/Client Components, Server Actions, Authentication, Deployment auf Vercel — von 0 zu einem produktionsreifen Fullstack-App.

14 Tage kostenlos testen →