# Next.js

Add a Next.js contact form with useFormsReach in a Client Component - no contact API route required.

## What you will achieve

A Next.js contact form using `@formsreach/react` in a Client Component, without `app/api/contact` mail handlers.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- Next.js App Router or Pages Router project

## Steps

### 1. Install

```bash
npm install @formsreach/react
```

### 2. Create a Client Component

```tsx
"use client";

import { useFormsReach } from "@formsreach/react";

export default function ContactForm() {
 const { submit, submitting, error } = useFormsReach("YOUR_ACCESS_KEY");

 return (
 <form onSubmit={submit}>
    <input name="name" required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button type="submit" disabled={submitting}>
    {submitting ? "Sending…" : "Send"}
    </button>
    {error ? <p role="alert">{error.message}</p> : null}
 </form>
 );
}
```

Keep `'use client'` (or `"use client"`) on the form module only. Pages and layouts can stay Server Components and import this form.

### 3. Render from a page

```tsx
import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
 return (
 <main>
    <h1>Contact</h1>
    <ContactForm />
 </main>
 );
}
```

### 4. Test

Run the dev server, submit once, confirm **Submissions** in the dashboard.

## Verify

- No hooks/server-component error in the console
- Submission row stored for your form
- Works with static export hosts because the browser posts to FormsReach

## Common failures

| Symptom | Check |
|---|---|
| Hooks error on server | Missing `"use client"` on the form file |
| Empty fields | Inputs need `name` attributes |
| Domain denied on production | Add your deploy host to the [allowlist](/docs/submit-api/domains/) |

## Next

- [React guide](/docs/frameworks/react/) for non-Next SPAs
- [Email channel](/docs/channels/email/)
- Marketing landing: [/integrations/nextjs/](/integrations/nextjs/)