Next.js Contact Form Without API Routes

Set up FormsReach with Next.js

Install @formsreach/react

npm install @formsreach/react and create an API key at FormsReach.

Add a Client Component

Create a component with 'use client' at the top. Import useFormsReach and build the form with onSubmit={submit}.

Import it from a Server Component page

Render the client form from any page or layout. Test email and/or WhatsApp delivery with your free monthly credits.

// npm install @formsreach/react 'use client'; import { useFormsReach } from '@formsreach/react'; export default function ContactForm() { const { submit, submitting } = useFormsReach('YOUR_API_KEY'); return ( <form onSubmit={submit}> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" disabled={submitting}>Submit Form</button> </form> ); }

// npm install @formsreach/react 'use client'; import { useFormsReach } from '@formsreach/react'; export default function ContactForm() { const { submit, submitting } = useFormsReach('YOUR_API_KEY'); return ( <form onSubmit={submit}> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" disabled={submitting}>Submit Form</button> </form> ); }

API routes are optional for contact forms

Next.js makes it easy to add app/api/... handlers - and easy to overbuild. For many marketing and product sites, a contact form only needs a reliable form API and email and WhatsApp delivery from one credit pool, not a custom mail stack. Credits meter usage across channels.

Platform notes

Keep 'use client' on the form module only; leave data pages as Server Components.
Same package as React: @formsreach/react.
Optional custom thank-you redirect is a Pro product capability - configure in the app when available.

Troubleshooting

Hooks error / server component: Move the form into a file that starts with 'use client'.
Hydration warnings: Do not conditionally render the form only on the client without a stable placeholder if you also SSR different markup.
Env keys: Prefer the app-issued API key in the form component for public contact forms (same model as other browser form APIs); never put private secrets in the client bundle that are not meant to be public form keys.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Why 'use client'?+

useFormsReach uses client-side form handling. Mark the form component as a Client Component; the rest of the page can stay a Server Component.

Can I avoid API routes entirely?+

Yes for standard contact forms. FormsReach is the form backend, so you do not need app/api/contact/route.ts just to forward email and WhatsApp.

Does this work with static export?+

Yes - the form posts to FormsReach from the browser, so you do not need a Next.js server runtime for submission delivery.

Free vs Pro?+

Deliver by email with spam filtering and to WhatsApp via the official Meta WhatsApp Business API. Usage is metered in monthly credits.

Next.js contact form for any website