Da li moram da dodam API rutu ili Server Action?

Ne. Forma šalje POST direktno na Formhook. Preskakanje API rute znači i jednu površinu manje koju sami morate rate-limitovati, i jedan cold start manje na serverless deployima.

Mogu li ovo da koristim u Server komponenti?

Da - snipet sa običnom HTML formom radi u svakoj Server komponenti. Samo fetch verzija mora biti Client komponenta, jer koristi useState.

Kako da rešim spam bez pisanja rate-limit middlewarea?

Zaštita od spama je na Formhookovoj strani. Honeypot tiho odbacuje botove, a Cloudflare Turnstile je prekidač po formi u kontrolnoj tabli. Limiti po IP adresi i po formi takođe se sprovode na serveru.

← Svi vodiči

Vodič

Next.js kontakt forma (backend nije potreban)

Next.js-u ne treba sopstveni prijemnik formi. Možete da ubacite istu običnu HTML form action u bilo koju Server komponentu, ili - ako želite klijentska stanja uspeha i greške - da koristite malu Client komponentu sa fetch-om. Obe šalju POST direktno na Formhook.

Koristite običnu HTML formu

API ruta vam nije potrebna. Forma šalje POST direktno na Formhook i vaš framework nikada ne mora da dodirne unos.

contact.html

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <!-- honeypot: bots fill this; humans don't see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />

  <!-- optional: send users to a thank-you page after a native POST -->
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

Ili pošaljite fetch-om u Next.js

Koristite ovu verziju ako želite klijentska stanja uspeha/greške bez ponovnog učitavanja stranice.

components/contact-form.tsx

"use client";

import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");

    const form = e.currentTarget;
    const data = Object.fromEntries(new FormData(form));

    const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? "ok" : "error");
    if (res.ok) form.reset();
  }

  if (status === "ok") return <p>Thanks - we'll be in touch.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <input type="text" name="_gotcha" tabIndex={-1} hidden />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Kako radi

Običan form action radi u svakoj Next.js stranici ili layoutu, uključujući Server komponente. Bez app/api/contact/route.ts, bez Server Actiona, bez middlewarea. Ako želite klijentski UX sa stanjima uspeha i greške, drugi snipet pokazuje kanonski obrazac: "use client", useState, onSubmit, fetch ka formhook.app/f/YOUR_API_KEY. Honeypot (_gotcha) i opcioni _redirect ista su specijalna polja iz HTML vodiča.

Šta se dešava dalje

Unos se pojavljuje u vašoj Formhook kontrolnoj tabli u roku od sekunde.
Push obaveštenje stiže na svaki uređaj na kom ste ga uključili.
Odgovorite direktno iz kontrolne table (Pro i više) - zgodno za rad sa klijentima gde svaki projekat ima svoju kontakt rutu.

Isporučite svoju Next.js kontakt formu danas.

Registrujte se besplatno, napravite formu, nalepite API ključ. Pet minuta.

Počnite besplatno

Besplatni paket: 5 formi · 250 unosa mesečno · Bez kreditne kartice.

Next.js kontakt forma - FAQ

Da li moram da dodam API rutu ili Server Action?: Ne. Forma šalje POST direktno na Formhook. Preskakanje API rute znači i jednu površinu manje koju sami morate rate-limitovati, i jedan cold start manje na serverless deployima.
Mogu li ovo da koristim u Server komponenti?: Da - snipet sa običnom HTML formom radi u svakoj Server komponenti. Samo fetch verzija mora biti Client komponenta, jer koristi useState.
Kako da rešim spam bez pisanja rate-limit middlewarea?: Zaštita od spama je na Formhookovoj strani. Honeypot tiho odbacuje botove, a Cloudflare Turnstile je prekidač po formi u kontrolnoj tabli. Limiti po IP adresi i po formi takođe se sprovode na serveru.

Vodiči za druge frameworke

Migrating from Formspree? See how Formhook compares.