INTEGRAÇÃO COM FRAMEWORK · APP ROUTER & SERVER ACTIONS

Formulários em Next.js com Server Actions & App Router | Lugatu

Crie formulários ágeis e fortemente tipados no Next.js usando Server Actions. Entregue mensagens direto na Lugatu com suporte completo ao TypeScript.

Criar endpoint para Next.js → Copiar Server Action

1. Arquitetura Next.js: Cliente vs. Servidor

O App Router do Next.js permite envios diretos pelo navegador ou processamento em Server Actions no servidor, mantendo suas chaves em segredo.

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 com endpoint público

Para formulários simples de contato, um componente de cliente ("use client") que envie JSON para o endpoint público resolve perfeitamente.

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 segurança e autenticação

Atenção às variáveis de ambiente: Nunca use o prefixo NEXT_PUBLIC_ em chaves de API privadas. Deixe LUGATU_API_KEY restrita ao servidor.

Solução de problemas e erros comuns de ingestão

Erro de variável de ambiente ausente

Confira se LUGATU_FORM_ID e LUGATU_API_KEY estão no seu .env.local e nas variáveis do painel da Vercel ou hospedagem.

Perguntas frequentes

Suporta Next.js 14 e 15 com App Router?

Sim. A Lugatu é totalmente compatível com App Router, Server Actions, Route Handlers e Pages Router.

Pronto para criar o endpoint do seu formulário?

Comece gratuitamente em segundos. Não é necessário cartão de crédito.

Comece grátis →