Formularios con acción

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 30 de 47.

En HTML puro, el action de un form es una URL a la que se hace un POST. En Next.js puedes pasarle una función en su lugar:

import { addItem } from './actions';

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

Al hacer submit, React hace tres cosas por ti: detiene la recarga de página habitual del navegador al hacer submit, recopila los campos con nombre del formulario en un objeto FormData y llama a tu action con él.

Note lo que no está allí: sin onSubmit, sin event.preventDefault(), sin estado. Y esta página sigue siendo un Server Component: la action son datos que se pasan, no un controlador de eventos, por lo me cruza el límite sin problemas.

Una cosa a tener en cuenta: el item se guarda, pero la list en pantalla no cambiará todavía. La página ya se renderizó en el server, y nada le ha dicho que vuelva a mirar. Dentro de dos lecciones solucionarás eso en una sola línea.

Desafío

Principiante

La lista de compras tiene un input y un button, pero nada los conecta al server. La action ya está escrita para ti en app/actions.js.

En app/page.jsx, importa addItem desde './actions'.
Envuelve el input y el button en un <form> con id="add-form".
Dale a ese form action={addItem}.

Deja intacto el name="text" del input: la action lee el campo por ese nombre.

Pruébalo tú mismo

import './globals.css';

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

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