INTÉGRATION FRAMEWORK · APP ROUTER & SERVER ACTIONS

Formulaires Next.js avec Server Actions & App Router | Lugatu

Concevez des formulaires performants et typés dans Next.js à l’aide des Server Actions. Transmettez les demandes directement à Lugatu avec un support TypeScript complet.

Créer un point de terminaison Next.js → Copier la Server Action

1. Architecture Next.js : client ou serveur

L’App Router de Next.js prend en charge les envois directs depuis le navigateur ou le traitement sécurisé via des Server Actions préservant vos clés secrètes.

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. Composants clients avec point de terminaison public

Pour un formulaire simple, un composant client ("use client") transmettant directement les données en JSON à l’URL publique du formulaire est amplement suffisant.

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>
  );
}

Invariant de sécurité et d'authentification

Protection des variables d’environnement : ne préfixez jamais vos clés API programmatiques par NEXT_PUBLIC_. Utilisez LUGATU_API_KEY exclusivement côté serveur.

Dépannage et erreurs d’ingestion courantes

Erreur de variable d’environnement manquante

Vérifiez que LUGATU_FORM_ID et LUGATU_API_KEY sont bien renseignés dans votre fichier .env.local ainsi que dans les variables de déploiement Vercel.

Foire aux questions

Est-ce compatible avec Next.js 14 et 15 ?

Oui. Lugatu est pleinement compatible avec Next.js App Router, Server Actions, Route Handlers et le Pages Router classique.

Prêt à créer votre point de terminaison de formulaire ?

Commencez gratuitement en quelques secondes. Aucune carte de crédit requise.

Commencez gratuitement →