Riepilogo: azioni server

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 33 di 47.

Sfida

Medio

Riepilogo del capitolo: il guestbook qui sotto non salva nulla e non si aggiorna mai. Crea l'intero flusso: modulo → action → pagina aggiornata.

In app/actions.js, contrassegna il file con 'use server' come sua prima riga e, dopo la chiamata di salvataggio, usa revalidatePath('/') (importato da 'next/cache').
In app/page.jsx, importa addGuest da './actions' e racchiudi l'input e il pulsante in un <form> con id="guest-form" e action={addGuest}.
Assegna all'input name="name": questa è la chiave che l'action legge con formData.get('name').

Provalo tu

import './globals.css';

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

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

Tutte le lezioni di Nozioni essenziali di Next.js

1Perché Next.js

Cosa aggiunge Next.js La cartella app La tua prima pagina Riepilogo: perché Next.js

4Server e Client

Due tipi di componenti Leggere l'errore La riga 'use client'Mantieni piccole le parti Client Server dentro Client Riepilogo: Server e Client

7Navigazione lato client

Il link attivo Routing programmatico Filtrare con l'URL Gestori delle route Riepilogo: navigazione

3Layout e metadati

Il layout principale Navigazione condivisa Layout nidificati Metadati della pagina Metadati dinamici Riepilogo: layout

6Azioni server

Che cos'è un'azione server Moduli che agiscono Leggere i dati dei moduli Aggiornare la paginaRiepilogo: azioni server