INTEGRAZIONE FRAMEWORK · APP ROUTER & SERVER ACTIONS

Moduli Next.js con Server Actions & App Router | Lugatu

Crea moduli scattanti e tipizzati in Next.js usando le Server Actions. Consegna le richieste direttamente a Lugatu con il pieno supporto di TypeScript.

Crea endpoint per Next.js → Copia la Server Action

1. Architettura Next.js: Invio Client vs. Server

L’App Router di Next.js consente sia l’invio diretto dal browser sia l’elaborazione lato server tramite Server Actions, mantenendo protette le chiavi segrete.

app/actions/contact.ts typescript

'use server';

export async function submitContact(prevState: any, formData: FormData) {
  // Silent rejection of automated bot submissions via honeypot trap
  const honeypot = (formData.get('_gotcha') as string) || '';
  if (honeypot) {
    return { success: true, error: null };
  }

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name || !email || !message) {
    return { success: false, error: 'All fields are required.' };
  }

  const payload = {
    fields: { name, email, message },
  };

  try {
    const res = await fetch(`https://www.lugatu.com/api/v1/forms/${process.env.LUGATU_FORM_ID}/submissions`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.LUGATU_API_KEY}`,
        'Content-Type': 'application/json',
        'Idempotency-Key': crypto.randomUUID(),
      },
      body: JSON.stringify(payload),
    });

    if (!res.ok) {
      return { success: false, error: 'Failed to submit form.' };
    }

    return { success: true, error: null };
  } catch (err) {
    return { success: false, error: 'Network error occurred.' };
  }
}

2. Componenti client con endpoint pubblico

Per un semplice modulo di contatto, un componente client ("use client") che invii dati JSON all’URL pubblico del modulo è perfetto.

components/ContactForm.tsx tsx

'use client';

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

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

  return (
    <form action={formAction} className="space-y-4 max-w-md">
      <div>
        <label className="block text-sm font-semibold mb-1">Name</label>
        <input name="name" required className="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label className="block text-sm font-semibold mb-1">Email</label>
        <input type="email" name="email" required className="w-full border rounded-xl p-2.5" />
      </div>
      <div>
        <label className="block text-sm font-semibold mb-1">Message</label>
        <textarea name="message" rows={4} required className="w-full border rounded-xl p-2.5" />
      </div>

      <input type="text" name="_gotcha" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />

      <button type="submit" disabled={isPending} className="btn-primary-editorial w-full py-2.5">
        {isPending ? 'Sending...' : 'Send Message'}
      </button>

      {state.success && <p className="text-emerald-700 text-sm">Thank you! Your message was received.</p>}
      {state.error && <p className="text-red-700 text-sm">{state.error}</p>}
    </form>
  );
}

Invariante di sicurezza e autenticazione

Attenzione alle variabili d’ambiente: Non anteporre mai il prefisso NEXT_PUBLIC_ a chiavi API private. Mantieni LUGATU_API_KEY solo sul server.

Risoluzione dei problemi ed errori comuni di importazione

Errore per variabile d’ambiente mancante

Verifica che LUGATU_FORM_ID e LUGATU_API_KEY siano definite in .env.local e nelle variabili di produzione su Vercel o sul tuo host.

Domande frequenti

Supporta Next.js 14 e 15 con App Router?

Sì. Lugatu è pienamente compatibile con App Router, Server Actions, Route Handlers e con il classico Pages Router.

Pronto per creare l'endpoint del modulo?

Inizia gratuitamente in pochi secondi. Nessuna carta di credito richiesta.

Inizia gratis →