A Next.js form backend that needs no API route

Why you don't need an API route for a contact form

When a form only needs to email you a message — contact, lead, signup, feedback — a hand-written app/api/contact/route.js or serverless function is pure overhead. You'd be wiring up a mail provider, API keys, validation, spam protection, rate limiting and error handling, then deploying and maintaining it, all to move a few fields into your inbox.

A hosted form backend does that part for you. Your form POSTs to one endpoint; SnapItForms handles delivery, spam filtering, file uploads, storage and notifications. There is no server to run and no backend code to write.

You genuinely need your own API route when a form must run custom server logic — writing to your database, calling a paid API with a secret key, or reacting to the submission on the server. For everything else, skip it.

• No route.js / API route to build, secure or deploy.
• No mail provider account, SMTP credentials or SES setup.
• Spam filtering, file uploads and email notifications are built in.
• Works on any host — Vercel, Netlify, Cloudflare, static export — because there's no backend of your own.

Handle a Next.js form in 3 steps

1. Get a free access key

   Sign in to SnapItForms with Google to create a free account and copy your access key. Only you, the developer, sign in — your visitors never do.

2. POST a React client component to SnapItForms

   Mark the component "use client", capture the submit event, and fetch the endpoint with new FormData(e.target) — including a hidden access_key input. Read the JSON response to show a success state.

3. Or drop in a plain HTML form

   When you don't need JavaScript, set a native <form> action to the endpoint. Submissions are emailed to you with zero client-side code.

1. React client component (App Router)

Create app/contact/ContactForm.jsx. The "use client" directive makes it interactive so you can track submitting and success state:

"use client";

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle"); // idle | sending | success | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");

    try {
      const res = await fetch("https://api.snapitforms.com/submit", {
        method: "POST",
        body: new FormData(e.target) // includes the hidden access_key input
      });
      const data = await res.json();
      setStatus(data.success ? "success" : "error");
      if (data.success) e.target.reset();
    } catch {
      setStatus("error");
    }
  }

  if (status === "success") {
    return <p>Thanks — your message is on its way.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* your free access key — the only SnapItForms-specific field */}
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Then render it from any Server Component page, e.g. app/contact/page.jsx:

import ContactForm from "./ContactForm";

export default function ContactPage() {
  return <ContactForm />;
}

2. Plain HTML form (no JavaScript)

Don't need interactive state? A native form works inside a Server Component with no "use client" at all. The browser posts it directly and SnapItForms emails you the result:

<form action="https://api.snapitforms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Works the same everywhere

Nothing here is App Router–specific. The exact same hidden access_key field plus POST works in the Next.js Pages Router, in React apps built with Create React App or Vite, and in Astro, Remix, SvelteKit, Nuxt, plain HTML and any static host. The endpoint accepts standard form fields as multipart/form-data, urlencoded and JSON, so new FormData(form) from a browser fetch just works — including file uploads. The API supports CORS for browser fetch.

Prefer not to hand-write the markup? The free form builder and templates generate ready-to-paste form code for you.

Next.js form backend FAQ

Related guides