Rückblick: Server Actions

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

Aufgabe

Mittel

Kapitelrückblick: Das Gästebuch unten speichert nichts und wird nie aktualisiert. Baue den gesamten Ablauf: Formular → Aktion → neue Seite.

Markiere in app/actions.js die Datei mit 'use server' als erste Zeile und rufe nach dem Speichern revalidatePath('/') auf (importiert aus 'next/cache').
Importiere in app/page.jsx addGuest aus './actions' und schließe das Eingabefeld und die Schaltfläche in ein <form> mit id="guest-form" und action={addGuest} ein.
Gib dem Eingabefeld name="name": Das ist der Schlüssel, den die Aktion mit formData.get('name') ausliest.

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 Rückblick: Warum Next.js

4Server & Client

Zwei Arten von Komponenten Den Fehler lesen Die Zeile „use client“Client-Teile klein halten Server innerhalb des Clients Rückblick: Server & Client

7Clientseitige Navigation

Der aktive Link Programmatisches Routing Filtern mit der URL Route-Handler Rückblick: Navigation

3Layouts & Metadaten

Das Root-Layout Gemeinsame Navigation Verschachtelte Layouts Seitenmetadaten Dynamische Metadaten Rückblick: Layouts

6Server Actions

Was ist eine Server Action?Formulare, die handeln Formulardaten lesen Die Seite aktualisierenRückblick: Server Actions