Moduli che agiscono
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 30 di 47.
Nel semplice HTML, action di un modulo è un URL a cui inviare una richiesta POST. In Next.js puoi passargli invece una funzione:
import { addItem } from './actions';
<form action={addItem}>
<input name="text" />
<button type="submit">Add</button>
</form>Al momento dell'invio, React fa tre cose per te: impedisce il normale invio del browser che ricarica la pagina, raccoglie i campi del modulo con nome in un oggetto FormData e chiama la tua action passandoglielo.
Nota cosa non c’è: niente onSubmit, niente event.preventDefault(), nessuno stato. E questa pagina è ancora un Server Component: l’azione è un dato che viene passato, non un gestore di eventi, quindi attraversa tranquillamente il confine.
Una cosa a cui prepararti: l’elemento viene salvato, ma l’elenco sullo schermo non cambierà ancora. La pagina è già stata renderizzata sul server e nulla le ha detto di controllare di nuovo. Tra due lezioni sistemerai tutto con una riga.
Sfida
PrincipianteLa lista della spesa ha un campo di input e un pulsante, ma non c'è nulla che li colleghi al server. L'action è già scritta per te in app/actions.js.
- In
app/page.jsx, importaaddItemda'./actions'. - Racchiudi il campo di input e il pulsante in un
<form>conid="add-form". - Assegna a quel form
action={addItem}.
Lascia invariato name="text" del campo di input: l'action legge il campo usando quel nome.
Provalo tu
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La strutturaPassaggio 2: La griglia del menu
Passaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale