Do I need a Route Handler?

Not for basic contact forms—MuxForms is the backend.

Where do I allow origins?

In the form settings in the MuxForms dashboard.

Can I use Server Actions?

Yes, POST JSON server-side with the ingest secret.

Is there a longer guide?

See the Next.js blog post on muxforms.com/blog.

Upgrade to Pro

View .md

MuxForms on Next.js lets you add a contact form without maintaining /api/contact in your repo. Embed on App Router pages or POST JSON from a Server Action with the ingest secret. Allow your production origin for browser embeds.

Docs

Next.js

MuxForms is a good fit for App Router marketing sites that should not grow a /api/contact route, a Resend client, and a Sheet for every property.

Next.js patterns

Pattern	When to use
embed.js	Marketing pages, quick setup
@muxforms/react	Client components
Server Action + API	Custom UI, server-held secret

Client component with @muxforms/react

"use client";

import { MuxForm } from "@muxforms/react";

export function ContactForm() {
  return <MuxForm formId="FORM_UUID" />;
}

Load embed.js once in root layout

For multi-page marketing sites without the React package:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://www.muxforms.com/embed.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

// app/contact/page.tsx
export default function ContactPage() {
  return <div data-form-id="FORM_UUID" />;
}

Common questions

Do I need a Route Handler?: Not for basic contact forms—MuxForms is the backend.
Where do I allow origins?: In the form settings in the MuxForms dashboard.
Can I use Server Actions?: Yes, POST JSON server-side with the ingest secret.
Is there a longer guide?: See the Next.js blog post on muxforms.com/blog.

Keep the Next.js app thin.

MuxForms owns ingest. Your repo stays product.

Upgrade to Pro