# Next.js

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.

## 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" />;
}
```

## FAQ

### 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.

---

HTML version: https://www.muxforms.com/docs/nextjs
Source: MuxForms (https://www.muxforms.com)