`<Form>`

Enhanced HTML form with client-side navigation and prefetching for search.

Since Next 15 Spec ↗

Syntax

import Form from 'next/form'; <Form action="/search"> ... </Form>

Parameters

Name	Type	Required	Description
`action`	`string \| ((formData: FormData) => void)`	Yes	A URL string (navigates with form fields as query params) or a Server Action function (mutates data).

Returns

ReactElement — Renders a <form> with Next.js enhancements.

Examples

import Form from 'next/form'

// String action: navigates to /search?query=...
export default function SearchBar() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Search</button>
    </Form>
  )
}

import Form from 'next/form'
import { createPost } from './actions'

// Function action: runs a Server Action
export default function NewPost() {
  return (
    <Form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </Form>
  )
}

Notes

With a string `action`, `<Form>` prefetches the destination, performs client-side navigation, and submits fields as URL search params (ideal for search/filter pages). With a function `action` it behaves like a Server Action form. Use string actions for navigation, function actions for mutations.