Add a form to Next.js

Render a Fillo form in a Next.js App Router page as native React elements. The form lives in a small Client Component, and the route around it stays a Server Component.

Install the React package

pnpm add @usefillo/react

Import the optional default stylesheet once, in the root layout:

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

Create a Client Component

The form holds interactive state and calls Fillo from the browser, so it needs "use client".

// 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:

// app/contact/page.tsx
import { ContactForm } from "./ContactForm";

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

The form ID or slug must point at a published form. Loading and submitting it needs no key. Add a createClient() with a pk_ key only when the app syncs a code-defined schema or uses a custom API origin.

Pass signed-in identity

Compute the respondent hash on the server, then pass it to the Client Component as a prop. The in-app feedback guide has the full pattern.

Match your app's styling

The default stylesheet uses cascade layers, so Tailwind utilities override its slots and state attributes. On Tailwind v3 or an app with a heavy CSS reset, import @usefillo/react/styles.unlayered.css instead. See styling.

Check it before you ship

1. Load the route and check the console for hydration warnings.
2. Navigate away and back, then submit again.
3. Submit with the network off and confirm the answers survive.
4. Check the success state and a narrow layout.
5. Find the saved response in Fillo.

Related

• Contact example: See the renderer's loading, validation, and success states.
• Build an in-app feedback form in Next.js: Add signed account context on an authenticated route.
• Add a form to React: Define the form in code with defineForm().
• Embed quickstart: Choose published-ID or code-defined rendering.