Zusammenfassung: Server Actions

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 33 von 47.

Aufgabe

Mittel

Kapitelzusammenfassung: Das Gästebuch unten speichert nichts und wird nie aktualisiert. Baue den gesamten Ablauf: Formular → Action → aktualisierte Seite.

Kennzeichne die Datei in app/actions.js mit 'use server' in der ersten Zeile, und rufe nach dem Speichern revalidatePath('/') auf (importiert aus 'next/cache').
Importiere in app/page.jsx addGuest aus './actions' und hülle das Input-Feld und den Button in ein <form> mit id="guest-form" und action={addGuest} ein.
Gib dem Input name="name": Das ist der Schlüssel, den die Action mit formData.get('name') liest.

Probier es selbst

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Alle Lektionen in Next.js Essentials

1Warum Next.js

Was Next.js ergänzt Der App-Ordner Deine erste Seite Zusammenfassung: Warum Next.js

4Server & Client

Zwei Arten von Komponenten Den Fehler lesen Die 'use client'-Zeile Client-Teile klein halten Server innerhalb von Client Zusammenfassung: Server & Client

7Client-seitige Navigation

Der aktive Link Programmatisches Routing Filtern mit der URL Route-Handler Zusammenfassung: Navigation

3Layouts & Metadaten

Das Root-Layout Gemeinsame Navigation Verschachtelte Layouts Seiten-Metadaten Dynamische Metadaten Zusammenfassung: Layouts

6Server Actions

Was ist eine Server Action?Formulare mit Funktion Formulardaten auslesen Seite aktualisierenZusammenfassung: Server Actions