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 enviarlo, React hace tres cosas por ti: detiene el envío normal del navegador, que recarga la página, recopila los campos con nombre del formulario en un objeto FormData y llama a tu acción con él.

Observa lo que no está ahí: ningún onSubmit, ningún event.preventDefault(), ningún estado. Y esta página sigue siendo un Server Component: la acción son datos que se pasan, no un controlador de eventos, por lo que cruza el límite sin problemas.

Prepárate para algo: el elemento se guarda, pero la lista en pantalla aún no cambiará. La página ya se renderizó en el servidor y nada le ha indicado que vuelva a comprobarlo. Dentro de dos lecciones lo solucionarás en una sola línea.

Desafío

Principiante

La lista de compras tiene un campo de entrada y un botón, pero nada los conecta con el servidor. La acción ya está escrita para ti en app/actions.js.

En app/page.jsx, importa addItem desde './actions'.
Envuelve el campo de entrada y el botón en un <form> con id="add-form".
Asigna a ese formulario action={addItem}.

Deja intacto el name="text" del campo de entrada: la acción lee el campo mediante 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>
    );
}