Formulare, die handeln

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

In einfachem HTML ist action eines Formulars eine URL, an die per POST gesendet wird. In Next.js kannst du stattdessen eine Funktion übergeben:

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Beim Absenden erledigt React drei Dinge für dich: Es verhindert das normale Absenden des Browsers mit dem Neuladen der Seite, sammelt die benannten Felder des Formulars in einem FormData-Objekt und ruft deine Aktion damit auf.

Beachte, was nicht vorhanden ist: kein onSubmit, kein event.preventDefault(), kein State. Und diese Seite ist weiterhin eine Server Component: Die Action sind übergebene Daten, kein Event-Handler, daher überschreitet sie die Grenze problemlos.

Worauf Sie sich einstellen sollten: Der Eintrag wird gespeichert, aber die Liste auf dem Bildschirm ändert sich noch nicht. Die Seite wurde bereits auf dem Server gerendert und nichts hat ihr gesagt, dass sie erneut nachsehen soll. In zwei Lektionen werden Sie das mit einer einzigen Zeile beheben.

Aufgabe

Anfänger

Die Einkaufsliste hat ein Eingabefeld und eine Schaltfläche, aber nichts verbindet sie mit dem Server. Die Aktion ist bereits für dich in app/actions.js geschrieben.

Importiere in app/page.jsx addItem aus './actions'.
Umschließe das Eingabefeld und die Schaltfläche mit einem <form> mit id="add-form".
Gib diesem Formular action={addItem}.

Lass das name="text" des Eingabefelds unverändert: Die Aktion liest das Feld anhand dieses Namens.

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>
    );
}