HomeCasa Prompts

Next.js-App-Router-Funktion mit Server Actions

Setzen Sie eine vollständige Funktion im Next.js App Router mit Server Actions, Zod-Validierung, Lade- und Fehlerzuständen sowie Tests um. Entwickelt für ChatGPT, Claude und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Code · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Senior-Frontend-Entwickler mit Schwerpunkt auf dem Next.js App Router, React Server Components und striktem TypeScript.

Ich möchte die Funktion „{{feature}}“ in einer Next.js-{{next_version}}-Anwendung umsetzen.
Datenschicht: {{data_layer}}.
Authentifizierung: {{auth}}.
Geschäftsregeln und Formularfelder: {{rules}}.

Liefere in dieser Reihenfolge:
1. Den Dateibaum in `app/` und `lib/` (Routen, `page.tsx`, `loading.tsx`, `error.tsx`, Client- und Server-Komponenten) und erkläre, was eine Server Component und was eine Client Component ist und warum.
2. Ein Zod-Validierungsschema, das von Client und Server gemeinsam genutzt wird, mit verständlichen Fehlermeldungen.
3. Die vollständige Server Action (`'use server'`): Prüfung von Sitzung und Berechtigungen, Validierung, Schreiben in die Datenbank, `revalidatePath` oder `revalidateTag` und ein typisiertes Antwortobjekt `{ ok, errors, message }`.
4. Das Formular mit `useActionState` und `useFormStatus` (unter Next.js 14 mit React 18 verwende `useFormState` aus `react-dom` statt `useActionState`): Fehler pro Feld, deaktivierter Button während des Absendens und Fokus auf dem ersten fehlerhaften Feld.
5. Fehlerbehandlung: erwartete und unerwartete Fehler, was protokolliert wird und was die Nutzerin oder der Nutzer sieht.
6. Tests: Unit-Tests für das Schema und die Action (mit simulierter Datenschicht) sowie ein Playwright-End-to-End-Test für den Normalfall.
7. Eine Sicherheits-Checkliste: CSRF, Autorisierung auf dem Server, Größenlimits für Anfragen und sensible Daten, die niemals zum Client gelangen dürfen.

Vorgaben:
- Striktes TypeScript, kein `any`.
- Erfinde keine Tabellennamen oder Umgebungsvariablen: Nutze [AUSFÜLLEN], wenn etwas fehlt.
- Wenn dir Informationen für eine wichtige Entscheidung fehlen, frage mich, bevor du Code schreibst.

So verwenden Sie ihn

  1. Beschreiben Sie die Funktion und die Geschäftsregeln so detailliert wie möglich.
  2. Geben Sie Ihre Next.js-Version an und wie Sie Daten speichern (Prisma, Drizzle, Supabase …).
  3. Fügen Sie den Prompt in Ihren Assistenten ein und übernehmen Sie die Dateien nacheinander in Ihr Projekt.
  4. Führen Sie die Tests aus und ersetzen Sie vor dem Deployment jeden Platzhalter [AUSFÜLLEN].

Anwendungsbeispiel

Funktion: Buchungen für Besprechungsräume anlegen und bearbeiten · Next.js 15 · Datenschicht: PostgreSQL mit Prisma · Auth: Auth.js mit den Rollen Admin und Mitarbeitende.

Beispielergebnis

3. Server Action app/bookings/actions.ts

Das Zod-Schema liegt in lib/validation/booking.ts (eine 'use server'-Datei darf nur asynchrone Funktionen exportieren). Der Prisma-Modellname booking ist eine Annahme: [AUSFÜLLEN], falls er bei Ihnen anders lautet.

'use server';

import { revalidatePath } from 'next/cache';
import { auth } from '@/auth';
import { prisma } from '@/lib/prisma';
import { bookingSchema } from '@/lib/validation/booking';

export type ActionState = {
  ok: boolean;
  errors?: Partial<Record<'roomId' | 'start' | 'end', string[]>>;
  message?: string;
};

export async function createBooking(_prev: ActionState, formData: FormData): Promise<ActionState> {
  const session = await auth();
  if (!session?.user?.id) return { ok: false, message: 'Bitte melden Sie sich an, um zu buchen.' };

  const parsed = bookingSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };

  const { roomId, start, end } = parsed.data;
  const overlap = await prisma.booking.findFirst({
    where: { roomId, start: { lt: end }, end: { gt: start } },
  });
  if (overlap) return { ok: false, errors: { start: ['Der Raum ist zu dieser Zeit bereits gebucht.'] } };

  await prisma.booking.create({ data: { roomId, start, end, userId: session.user.id } });
  revalidatePath('/bookings');
  return { ok: true, message: 'Buchung angelegt.' };
}

Session und Überschneidung werden immer auf dem Server geprüft; die Validierung im Client dient nur schnellem Feedback. In Produktion sollte eine Exclusion-Constraint in PostgreSQL die Prüfung absichern …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · Next.js
Ausgabetyp
Code
Niveau
Experte
Entwickelt für
ChatGPT, Claude und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Funktion, Next.js-Version, Datenschicht, Authentifizierung und Regeln und Felder
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Warum Server Actions statt einer API-Route?

Für Formulare und interne Änderungen innerhalb Ihrer eigenen App brauchen Server Actions weniger Code, lassen sich in die Cache-Revalidierung einbinden und funktionieren auch ohne clientseitiges JavaScript. Wenn Dritte die Operation nutzen, bleibt eine API-Route die bessere Wahl.

Genügt die Validierung im Client?

Nein. Clientseitige Validierung verbessert die Bedienung, doch die Server Action muss erneut validieren und Berechtigungen prüfen, da jeder sie direkt aufrufen kann.

Wofür ist dieser Prompt gedacht?

Setzen Sie eine vollständige Funktion im Next.js App Router mit Server Actions, Zod-Validierung, Lade- und Fehlerzuständen sowie Tests um.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Funktion, Next.js-Version, Datenschicht, Authentifizierung und Regeln und Felder). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts