INTEGRACIÓN CON FRAMEWORK · APP ROUTER & SERVER ACTIONS

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

Construya formularios eficientes y tipados en Next.js mediante Server Actions. Transmita solicitudes directamente a Lugatu con respaldo completo de TypeScript.

Crear extremo para Next.js → Copiar Server Action

1. Arquitectura de formularios en Next.js: Cliente vs. Servidor

El App Router de Next.js permite tanto envíos directos desde el cliente como procesamiento seguro mediante Server Actions protegiendo sus claves.

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. Componentes de cliente con extremo público

Para formularios sencillos, un componente de cliente ("use client") que envíe JSON a la URL pública del formulario es totalmente suficiente.

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 de seguridad y autenticación

Protección de variables de entorno: Nunca anteponga el prefijo NEXT_PUBLIC_ a claves de API privadas. Utilice LUGATU_API_KEY únicamente en el servidor.

Solución de problemas y errores comunes de ingesta

Error por variable de entorno no definida

Compruebe que LUGATU_FORM_ID y LUGATU_API_KEY estén configuradas en .env.local y en las variables de entorno de su proveedor.

Preguntas frecuentes

¿Es compatible con Next.js 14 y 15?

Sí. Lugatu es totalmente compatible con Next.js App Router, Server Actions, Route Handlers y el clásico Pages Router.

¿Listo para crear el punto final de su formulario?

Comience gratis en segundos. No se requiere tarjeta de crédito.

Comience gratis →