MWONGOZO WA UTANGAMANO · FRONTEND & NEXT.JS

Muunganisho wa Nyuma ya Fomu ya Next.js (Kidhibiti cha Programu na Vitendo vya Seva)

Jaza Mwongozo wa utekelezaji wa TypeScript na React wa kushughulikia fomu za mawasiliano katika Next.js 14/15 kwa kutumia ncha za Lugatu na Vitendo vya Seva bila udhihirisho wowote wa kitambulisho.

Unganisha Next.js Project → Mwongozo wa Astro

1. Usanifu wa Kidhibiti cha Programu cha Next.js chenye Vitendo vya Seva

Next.js Server Actions hutekelezwa kwenye seva pekee, na kuifanya kuwa bora kwa kuwasilisha maswali kwa kutumia vitufe vya faragha vya API ya Lugatu bila kufichua siri katika vifurushi vya wateja.

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. Sehemu ya Fomu ya Upande wa Mteja yenye Hali ya Kupakia

Unganisha Kitendo chako cha Seva kwa kipengele cha mteja cha React 19 / Next.js kilicho na viashirio vya upakiaji vinavyoweza kufikiwa.

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

Tofauti ya Usalama na Uthibitishaji

Maagizo ya Usalama: Usiwahi kuweka kiambishi awali LUGATU_API_KEY na NEXT_PUBLIC_. Vigezo vya upande wa seva ya kibinafsi pekee vinaweza kushikilia kwa usalama ufunguo wako wa moja kwa moja wa API.

Utatuzi na Hitilafu za Kawaida za Kumeza

Ombi la ufunguo wa API hurejesha 403 FORBIDDEN_BROWSER_ORIGIN

Unapiga simu () kutoka kwa msimbo wa kivinjari wa upande wa mteja kwa ufunguo wa API. Badili hadi kwa Kitendo cha Seva ya Next.js au utumie mwisho wa fomu ya umma bila ufunguo wa API.

Maswali Yanayoulizwa Mara Kwa Mara

Je, ninaweza kupeleka hii kwa Kurasa za Vercel au Cloudflare?

Ndiyo. Vitendo vya Seva hufanya kazi kwa urahisi kwenye mifumo isiyo na seva na nyakati za utekelezaji zinazotumika na Next.js.

Je, uko tayari kuunda mwisho wa fomu yako?

Anza bila malipo kwa sekunde chache. Hakuna kadi ya mkopo inahitajika.

Anza Bure →