Server Actions in Next.js: gestisci i form senza API routes, più veloci e sicuri

Se hai mai sviluppato un form in Next.js, conosci il rituale: crei un componente lato client, poi una route API, gestisci la validazione, l'invio, gli errori, il caricamento… E alla fine il codice si allunga, la manutenzione aumenta, e la latenza tra client e server rallenta tutto. Il problema è che la maggior parte dei form — iscrizioni, contatti, lead — non ha bisogno di un'architettura a due strati. Servono solo: prendere i dati, validarli, salvarli e rispondere. Per questo, dal 2023, Next.js ha introdotto le Server Actions: funzioni che girano esclusivamente lato server, chiamabili direttamente dal client senza scrivere una riga di API route. Noi di Meteora Web le usiamo nei progetti Laravel? No, ma in Next.js sì, e il risparmio di codice è netto. Meno file, meno bug, meno tempi morti. E per un'azienda — piccola o media — significa meno costi di sviluppo e manutenzione.

Cos'è una Server Action

Una Server Action è una funzione asincrona marcata con la direttiva "use server". Può essere definita in un file separato o direttamente all'interno di un componente server. La sua caratteristica principale: viene eseguita sul server, non nel browser. Quando la chiami dal client, Next.js serializza i dati, li spedisce via POST a un endpoint generato automaticamente, e restituisce la risposta. Il tutto con CSRF automatico e senza esporre logica sensibile.

Perché conviene rispetto alle API routes

• Meno boilerplate: niente file api/route.ts, niente gestione del body, niente Response manuale.
• Tipizzazione nativa: la funzione accetta e restituisce tipi TypeScript senza intermediari.
• Integrazione con i componenti: puoi usare i risultati direttamente nel Server Component senza re-fetch.
• Performance: nessun passaggio intermedio, la latenza è ridotta al minimo.
• Sicurezza: protezione automatica contro CSRF, validazione lato server obbligatoria.

Come si crea una Server Action in Next.js

Il metodo più pulito: creare un file actions.ts nella cartella del componente o in lib/. Esempio per un form di contatto che salva su un database (qui simulato con una console.log):

// app/actions/contact.ts
"use server";

export async function submitContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  // Validazione base
  if (!name || !email || !message) {
    return { error: 'Tutti i campi sono obbligatori' };
  }

  // Simula salvataggio (es. invio email, DB)
  console.log(`Nuovo contatto da ${name} (${email}): ${message}`);

  return { success: 'Messaggio inviato con successo' };
}

Nel componente del form (server component o client component con useActionState):

// app/contact/page.tsx
import { submitContact } from '@/app/actions/contact';

export default function ContactPage() {
  return (
    <form action={submitContact}>
      <input name="name" placeholder="Nome" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Messaggio" required></textarea>
      <button type="submit">Invia</button>
    </form>
  );
}

Niente onSubmit, niente fetch, niente stato di loading manuale. Il form invia i dati direttamente alla Server Action, che processa e restituisce un oggetto. Il server poi fa il re-render della pagina con i nuovi dati, se necessario.

Gestire stato di caricamento e feedback utente

Per un'esperienza user friendly, vuoi mostrare un messaggio di errore o di successo senza ricaricare la pagina. Next.js fornisce l'hook useActionState (da React 19) per gestire lo stato di una Server Action lato client:

'use client';
import { useActionState } from 'react';
import { submitContact } from '@/app/actions/contact';

export default function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, {
    error: null,
    success: null
  });

  return (
    <form action={formAction}>
      <input name="name" placeholder="Nome" />
      <input name="email" type="email" placeholder="Email" />
      <textarea name="textarea" placeholder="Messaggio"></textarea>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Invio in corso…' : 'Invia'}
      </button>
      {state?.error && <p style={{color:'red'}}>{state.error}</p>}
      {state?.success && <p style={{color:'green'}}>{state.success}</p>}
    </form>
  );
}

Il bello: tutto rimane server-side per la logica di business, ma il client ha il controllo dell'interfaccia senza ricaricare la pagina. Niente API routes, niente hook aggiuntivi.

Best practices per Server Actions nei form

Validazione lato server (sempre)

Non fidarti mai del client. Anche se usi HTML required, un utente può aggirarlo. La Server Action deve validare ogni campo. Usa librerie come Zod o Yup per dichiarare schemi:

import { z } from 'zod';

const contactSchema = z.object({
  name: z.string().min(2, 'Nome troppo corto'),
  email: z.string().email('Email non valida'),
  message: z.string().min(10, 'Messaggio troppo breve')
});

export async function submitContact(formData: FormData) {
  const parsed = contactSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message')
  });

  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  // … salvataggio
}

Caricamento di file

Le Server Action supportano nativamente il FormData, quindi anche gli upload di file sono semplici. Ricordati di impostare la dimensione massima in next.config.js con serverActions.bodySizeLimit.

Revalidate dati dopo l'invio

Se il form crea un record (es. iscrizione newsletter), vuoi che la cache venga invalidata. Usa revalidatePath o revalidateTag all'interno della Server Action:

import { revalidatePath } from 'next/cache';

export async function addSubscriber(formData: FormData) {
  // ... salva
  revalidatePath('/newsletter'); // o revalidateTag('subscribers')
}

Gestione errori e logging

Non mandare mai errori tecnici al client. Cattura eccezioni, logga su un servizio (Sentry, console), e restituisci un messaggio generico. I dettagli interni restano server-side.

Considerazioni economiche per chi sviluppa per PMI

Noi di Meteora Web vediamo ogni giorno il costo del codice inutile. Ogni API route è un file da scrivere, testare e mantenere. In un'applicazione Next.js con 10 form, se usi Server Actions elimini 10 file di route e tutta la logica di fetching client. Il tempo risparmiato si traduce in ore di sviluppo in meno — e per un'azienda, ore di fatturazione o di stipendio. Inoltre, la sicurezza integrata riduce il rischio di vulnerabilità CSRF, che su progetti piccoli viene spesso trascurata. Un bug di sicurezza costa molto di più di una scelta architetturale corretta. Il divario digitale si colma anche così: strumenti potenti ma accessibili, non solo per le big tech.

In sintesi — cosa fare adesso

1. Identifica tutti i form del tuo progetto Next.js che non richiedono logica client complessa (drag&drop, autocomplete esterno).
2. Converti le attuali API routes che gestiscono quei form in Server Actions: crea un file actions.ts, sposta la logica, usa "use server".
3. Sostituisci i componenti client con form che chiamano direttamente l'action tramite l'attributo action, oppure usa useActionState per feedback asincroni.
4. Implementa validazione lato server con Zod o Yup — non saltare questo passaggio anche se il form sembra semplice.
5. Testa la sicurezza: verifica che le Server Action non accettino chiamate esterne (di default sono protette, ma controlla che non ci siano CORS aperti).

Le Server Action non sono una moda: sono una risposta concreta a un problema reale. Le usiamo nei nostri progetti Next.js e funzionano. Provalo sul prossimo form e vedrai che differenza.