Funcionalidad en Next.js App Router con Server Actions

Prompt

Actúa como ingeniero frontend senior especializado en Next.js (App Router), React Server Components y TypeScript estricto.

Necesito implementar la funcionalidad «{{funcionalidad}}» en una aplicación Next.js {{version_next}}.
Persistencia de datos: {{persistencia}}.
Autenticación: {{autenticacion}}.
Reglas de negocio y campos del formulario: {{reglas}}.

Entrega, en este orden:
1. Árbol de archivos dentro de `app/` y `lib/` (rutas, `page.tsx`, `loading.tsx`, `error.tsx`, componentes cliente y servidor), justificando qué es Server Component y qué es Client Component.
2. Esquema de validación con Zod compartido entre cliente y servidor, con mensajes de error en español.
3. La Server Action completa (`'use server'`): comprobación de sesión y permisos, validación, escritura en la base de datos, `revalidatePath` o `revalidateTag` y un objeto de respuesta tipado `{ ok, errors, message }`.
4. El formulario con `useActionState` y `useFormStatus` (en Next.js 14 con React 18, usa `useFormState` de `react-dom` en lugar de `useActionState`): errores por campo, botón deshabilitado durante el envío y foco en el primer campo con error.
5. Gestión de errores: errores esperados frente a inesperados, qué se registra en logs y qué ve el usuario.
6. Tests: unitarios del esquema y de la acción (con la capa de datos simulada) y un test end-to-end con Playwright del flujo feliz.
7. Lista de comprobación de seguridad: CSRF, autorización en el servidor, límites de tamaño y datos sensibles que nunca deben llegar al cliente.

Restricciones:
- TypeScript estricto, sin `any`.
- No inventes nombres de tablas ni de variables de entorno: usa [COMPLETAR] si faltan.
- Si te falta información para decidir algo importante, pregúntame antes de escribir el código.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

'use server';

import { revalidatePath } from 'next/cache';
import { auth } from '@/auth';
import { prisma } from '@/lib/prisma';
import { bookingSchema } from '@/lib/validation/booking';

export type ActionState = {
  ok: boolean;
  errors?: Partial<Record<'roomId' | 'start' | 'end', string[]>>;
  message?: string;
};

export async function createBooking(_prev: ActionState, formData: FormData): Promise<ActionState> {
  const session = await auth();
  if (!session?.user?.id) return { ok: false, message: 'Inicia sesión para reservar.' };

  const parsed = bookingSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };

  const { roomId, start, end } = parsed.data;
  const overlap = await prisma.booking.findFirst({
    where: { roomId, start: { lt: end }, end: { gt: start } },
  });
  if (overlap) return { ok: false, errors: { start: ['La sala ya está reservada en ese horario.'] } };

  await prisma.booking.create({ data: { roomId, start, end, userId: session.user.id } });
  revalidatePath('/bookings');
  return { ok: true, message: 'Reserva creada.' };
}

Datos clave

Categoría

Programación y desarrollo · Next.js

Tipo de resultado

Código

Nivel

Avanzado

Pensado para

ChatGPT, Claude y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Funcionalidad, Versión de Next.js, Persistencia de datos, Autenticación y Reglas y campos

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes