The Next.js `Form` Component Explained

The Next.js Form component, imported from next/form, extends the native form element with two behaviors: it prefetches the target route's loading UI and performs client-side navigation on submit. It is built for forms that update URL search params, like search and filter bars, and it removes the boilerplate those forms usually need.

Start with a search box. The action prop holds the destination path, and the input name becomes the query parameter.

App.tsx

// app/page.tsx
import Form from 'next/form'
 
export default function SearchPage() {
  return <Form action="/search">
    <label htmlFor="query">Search</label>
    <input id="query" name="query" />
    <button type="submit">Search</button>
  </Form>
}

When a visitor types a query and submits, the browser navigates to /search?query=... without a full page reload. The label is tied to the input by id, which is what gives the field its accessible name.

Next.js also prefetches the shared UI for the /search route while the form is in view, so the results page appears faster.

How string actions work

When the action prop is a string, the form uses a GET request and encodes each field into the URL as a search param. It then navigates to that path. An empty string action submits to the current route with updated search params, which is useful for a filter bar on a listing page.

On the results page, read the query through the searchParams prop to fetch matching data. The searchParams value is a Promise in the App Router, so await it before reading the field. The form itself needs no onSubmit handler or router call, because navigation happens automatically.

Prefetching and client-side navigation are why this component exists. A native form would trigger a full page reload on submit, while the component keeps shared UI and client-side state in place.

Mutations with a function action

When the action prop is a function, the component behaves like a React form and runs that Server Action on submit. The replace and scroll props are ignored in this mode.

App.tsx

// app/posts/create/page.tsx
import Form from 'next/form'
import { createPost } from './actions'
 
export default function CreatePostPage() {
  return <Form action={createPost}>
    <label htmlFor="title">Title</label>
    <input id="title" name="title" />
    <button type="submit">Create post</button>
  </Form>
}

The action receives the fields as FormData, writes the post, and can redirect to the new page. Because the destination is only known after the action runs, this mode cannot prefetch shared UI.

Progressive enhancement still applies. The form posts and the action runs even before the JavaScript bundle loads, which is the same behavior a plain form element gets from a Server Action.

See building forms in Next.js with Server Actions for the plain form element pattern that this component wraps.

When to use the native form element

The component does not support every form feature. The method, encType, and target attributes are unsupported because they would override its navigation behavior, and the formMethod, formEncType, and formTarget equivalents fall back to plain browser behavior. Use a native form element when you need a file upload, a POST to an external URL, or a response in a new tab.

The same applies to the formAction attribute on submit buttons. It overrides the action prop and performs a client-side navigation, but it does not prefetch the destination.

For pending state inside the component, extract a submit button that reads useFormStatus. See search forms driven by URL search params for a full search flow.