ΟΔΗΓΟΣ ΕΝΣΩΜΑΤΩΣΗΣ · FRONTEND & NEXT.JS

Next.js Form Backend Integration (Ενέργειες δρομολογητή και διακομιστή εφαρμογής)

Πλήρης οδηγός υλοποίησης TypeScript και React για το χειρισμό φορμών επικοινωνίας στο Next.js 14/15 με χρήση τελικών σημείων και Ενέργειες διακομιστή Lugatu με μηδενική έκθεση διαπιστευτηρίων.

Connect Next.js Project → Astro Guide

1. Αρχιτεκτονική δρομολογητή εφαρμογών Next.js με Ενέργειες διακομιστή

Οι Ενέργειες διακομιστή Next.js εκτελούνται αποκλειστικά στον διακομιστή, καθιστώντας τις ιδανικές για την υποβολή ερωτήσεων με ιδιωτικά κλειδιά API Lugatu χωρίς να αποκαλύπτονται μυστικά σε πακέτα πελατών.

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. Στοιχείο φόρμας από την πλευρά του πελάτη με κατάσταση φόρτωσης

Συνδέστε το Server Action σε ένα στοιχείο πελάτη React 19 / Next.js με προσβάσιμες ενδείξεις φόρτωσης.

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

Αμετάβλητη ασφάλεια & έλεγχος ταυτότητας

Οδηγίες ασφαλείας: Μην βάζετε ποτέ πρόθεμα LUGATU_API_KEY με NEXT_PUBLIC_. Μόνο οι ιδιωτικές μεταβλητές από την πλευρά του διακομιστή μπορούν να κρατήσουν με ασφάλεια το ζωντανό κλειδί API σας.

Αντιμετώπιση προβλημάτων και κοινά σφάλματα κατάποσης

Το αίτημα κλειδιού API επιστρέφει 403 FORBIDDEN_BROWSER_ORIGIN

Πραγματοποιείτε μια κλήση fetch() από κώδικα προγράμματος περιήγησης από την πλευρά του πελάτη με ένα κλειδί API. Είτε μεταβείτε σε μια Ενέργεια διακομιστή Next.js είτε χρησιμοποιήστε το τελικό σημείο της δημόσιας φόρμας χωρίς κλειδί API.

Συχνές Ερωτήσεις

Μπορώ να το αναπτύξω στις σελίδες Vercel ή Cloudflare;

Ναί. Οι Ενέργειες διακομιστή λειτουργούν απρόσκοπτα σε πλατφόρμες χωρίς διακομιστές και χρόνους εκτέλεσης άκρων που υποστηρίζονται από το Next.js.

Είστε έτοιμοι να δημιουργήσετε το τελικό σημείο της φόρμας σας;

Ξεκινήστε δωρεάν σε δευτερόλεπτα. Δεν απαιτείται πιστωτική κάρτα.

Ξεκινήστε δωρεάν →