---
title: "Add a form to Next.js"
description: "Render a published Fillo form in the Next.js App Router — a Client Component wrapping native DOM."
order: 11
type: "guide"
topic: "Frameworks"
tags:
  - "Next.js"
  - "React"
  - "App Router"
  - "embed"
updated: "2026-07-15"
---

A Fillo form owns interactive state and makes browser requests, so in the App Router it lives in a Client Component.

## Install the React package

```bash
pnpm add @usefillo/react
```

Add the optional default stylesheet from a global CSS entry or root layout:

```tsx
// app/layout.tsx
import "@usefillo/react/styles.css";
```

## Create a client component

```tsx
// app/contact/ContactForm.tsx
"use client";

import { FilloForm } from "@usefillo/react";

export function ContactForm() {
  return (
    <FilloForm
      formId="your-published-form-id"
      onSubmitted={(responseId) => {
        console.info("Fillo response", responseId);
      }}
    />
  );
}
```

Render it from the route:

```tsx
import { ContactForm } from "./ContactForm";

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

The form ID or slug must point at a published form. Public load and submit requests don't need a publishable key — add a `pk_` client only when the app has to sync a code-defined schema or use a custom API origin.

## Pass signed-in identity safely

Build the respondent HMAC in a Server Component or server-only helper, then pass the ID, email, name, and hash into the client component. Never expose the workspace identity secret through `NEXT_PUBLIC_` environment variables.

## Match your app's styling

Fillo's stylesheet uses cascade layers, so Tailwind utilities can override named slots and state attributes. On Tailwind v3 or a reset-heavy app, use `styles.unlayered.css` instead. Test server render, hydration, route navigation, the error state, and narrow layouts.

## Try it

[Start with a prompt](/start?from=guide-nextjs-form) and your coding agent builds the first form, staged for your review — or [open the editor](/new).

## Related

- [Contact example](/examples#contact): Inspect the renderer and submission lifecycle used below.
- [Embed quickstart](/docs/embed): Choose published-ID or code-defined rendering.
- [React form guide](/guides/react-form): Use the same component outside Next.js.
- [Styling](/docs/styling): Override slots with Tailwind or plain CSS.