Funzionalità Next.js App Router con Server Actions

Prompt

Agisci come ingegnere frontend senior specializzato in Next.js App Router, React Server Components e TypeScript in modalità strict.

Devo implementare la funzionalità «{{feature}}» in un'applicazione Next.js {{next_version}}.
Livello dati: {{data_layer}}.
Autenticazione: {{auth}}.
Regole di business e campi del modulo: {{rules}}.

Consegna, in quest'ordine:
1. L'albero dei file dentro `app/` e `lib/` (route, `page.tsx`, `loading.tsx`, `error.tsx`, componenti client e server), spiegando cosa è un Server Component, cosa è un Client Component e perché.
2. Uno schema di validazione Zod condiviso tra client e server, con messaggi di errore comprensibili.
3. La Server Action completa (`'use server'`): controlli di sessione e permessi, validazione, scrittura nel database, `revalidatePath` o `revalidateTag` e un oggetto di risposta tipizzato `{ ok, errors, message }`.
4. Il modulo che usa `useActionState` e `useFormStatus` (con Next.js 14 e React 18, usa `useFormState` di `react-dom` al posto di `useActionState`): errori per campo, pulsante disabilitato durante l'invio e focus spostato sul primo campo non valido.
5. Gestione degli errori: errori attesi e inattesi, cosa viene registrato nei log e cosa vede l'utente.
6. Test: unit test per lo schema e per l'action (con il livello dati simulato) e un test end-to-end Playwright per il percorso principale.
7. Una checklist di sicurezza: CSRF, autorizzazione lato server, limiti di dimensione del payload e dati sensibili che non devono mai arrivare al client.

Vincoli:
- TypeScript strict, niente `any`.
- Non inventare nomi di tabelle o variabili d'ambiente: usa [DA COMPLETARE] se manca qualcosa.
- Se ti mancano informazioni necessarie per una decisione importante, chiedimele prima di scrivere codice.

Come usarlo

Esempio d'uso

Esempio di risultato

'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: 'Accedi per prenotare una sala.' };

  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 è già prenotata in quella fascia oraria.'] } };

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

Dati chiave

Categoria

Programmazione e sviluppo · Next.js

Tipo di output

Codice

Livello

Avanzato

Pensato per

ChatGPT, Claude e Microsoft Copilot

Verificato in

In attesa di verifica editoriale

Variabili

Funzionalità, Versione di Next.js, Livello dati, Autenticazione e Regole e campi

Lingua

Italiano

Prezzo

Gratuito, senza registrazione

Aggiornato

07/11/2026

Domande frequenti