GHID DE INTEGRARE · FRONTEND & NEXT.JS

Integrarea backend formular Next.js (acțiuni de ruter pentru aplicații și server)

Ghid complet de implementare TypeScript și React pentru gestionarea formularelor de contact în Next.js 14/15 folosind punctele finale Lugatu și acțiunile serverului cu expunere zero a acreditărilor.

Conectați proiectul Next.js → Ghid Astro

1. Arhitectura ruterului de aplicații Next.js cu acțiuni server

Next.js Server Actions se execută exclusiv pe server, făcându-le ideale pentru trimiterea de solicitări cu chei private API Lugatu fără a expune secretele din pachetele de clienți.

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. Componenta de formular pe partea clientului cu starea de încărcare

Conectați-vă Server Action la o componentă client React 19 / Next.js cu indicatori de încărcare accesibili.

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

Securitate și autentificare invariantă

Instrucțiuni de securitate: Nu prefixați niciodată LUGATU_API_KEY cu NEXT_PUBLIC_. Numai variabilele private de pe partea serverului pot deține în siguranță cheia dvs. API live.

Depanare și erori frecvente de ingestie

Solicitarea cheii API returnează 403 FORBIDDEN_BROWSER_ORIGIN

Efectuați un apel fetch() din codul browser-ului client cu o cheie API. Fie comutați la o acțiune de server Next.js, fie utilizați punctul final al formularului public fără o cheie API.

Întrebări frecvente

Pot implementa acest lucru pe Vercel sau Cloudflare Pages?

Da. Acțiunile serverului funcționează fără probleme pe platformele fără server și timpii de execuție edge acceptate de Next.js.

Sunteți gata să vă creați punctul final al formularului?

Începeți gratuit în câteva secunde. Nu este necesar un card de credit.

Începe gratuit →