Los Server Actions permiten ejecutar funciones del servidor directamente desde un formulario de Next.js. Con ellos podemos procesar datos, validar información y comunicarnos con una base de datos sin tener que crear necesariamente una API Route.
1. Crear la Server Action
Podemos crear un archivo actions.js dentro de una carpeta app:
"use server";
export async function crearUsuario(formData) {
const nombre = formData.get("nombre");
const email = formData.get("email");
console.log("Nombre:", nombre);
console.log("Email:", email);
// Aquí podríamos guardar los datos en una base de datos
}La directiva "use server" indica que la función debe ejecutarse exclusivamente en el servidor.
2. Conectar la acción al formulario
En nuestro page.js podemos importar la función:
import { crearUsuario } from "./actions";
export default function Page() {
return (
<main>
<h1>Registro de usuario</h1>
<form action={crearUsuario}>
<input
type="text"
name="nombre"
placeholder="Nombre"
required
/>
<input
type="email"
name="email"
placeholder="Correo electrónico"
required
/>
<button type="submit">
Registrarse
</button>
</form>
</main>
);
}La propiedad action conecta directamente el formulario con nuestra Server Action. Cuando el usuario presiona Registrarse, Next.js envía los datos al servidor y ejecuta crearUsuario().
3. Obtener los datos
El parámetro formData contiene todos los valores enviados:
const nombre = formData.get("nombre");
const email = formData.get("email");Es importante que cada campo tenga un atributo name, porque ese nombre será utilizado para recuperar su valor.
4. Validar los datos
La validación también puede realizarse en el servidor:
"use server";
export async function crearUsuario(formData) {
const nombre = formData.get("nombre");
const email = formData.get("email");
if (!nombre || !email) {
return { error: "Todos los campos son obligatorios" };
}
console.log("Usuario creado:", nombre, email);
return { success: true };
}Esto permite mantener las validaciones importantes fuera del código que se ejecuta en el navegador.
5. ¿Por qué utilizar Server Actions?
Los Server Actions simplifican el desarrollo de formularios porque permiten enviar información directamente al servidor, reduciendo la necesidad de crear endpoints adicionales. Además, funcionan muy bien con operaciones como crear, actualizar o eliminar registros.
Para proyectos con Next.js 16, esta característica resulta especialmente útil cuando trabajamos con formularios conectados a bases de datos, autenticación o paneles administrativos.
En resumen: formulario → Server Action → validación → base de datos o lógica del servidor.
