Recapitulación: Server Actions

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 33 de 47.

Desafío

Intermedio

Resumen del capítulo: el libro de visitas de abajo no guarda nada y nunca se actualiza. Crea todo el flujo: formulario → acción → página nueva.

En app/actions.js, marca el archivo con 'use server' como su primera línea y, después de la llamada de guardado, llama a revalidatePath('/') (importado desde 'next/cache').
En app/page.jsx, importa addGuest desde './actions' y envuelve el campo de entrada y el botón en un <form> con id="guest-form" y action={addGuest}.
Asigna al campo de entrada name="name": esa es la clave que la acción lee con formData.get('name').

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

Todas las lecciones de Esenciales de Next.js

1Por qué Next.js

Qué añade Next.js La carpeta App Tu primera página Recapitulación: Por qué Next.js

4Servidor y Cliente

Dos tipos de componentes Lectura del error La línea 'use client'Mantén las partes de cliente pequeñas Servidor dentro de cliente Resumen: Servidor y Cliente

7Navegación del cliente

El enlace activo Enrutamiento programático Filtrado con la URL Manejadores de rutas Recapitulación: Navegación

3Diseños y Metadatos

El diseño raíz Navegación compartida Diseños anidados Metadatos de la página Metadatos dinámicos Recapitulación: Diseños

6Server Actions

¿Qué es una Server Action?Formularios con acción Lectura de datos del formulario Actualización de la páginaRecapitulación: Server Actions