Next.js 16+ · Component

Form

Next.js's Form component enhances HTML forms with prefetching, client-side navigation, and progressive enhancement. A string action navigates with GET-style URL search parameters; a function action invokes server-side form logic.

Since: 15.0.0

How it works

Import Form from next/form and give it a destination string. Its controls are submitted as GET parameters, while Next.js enhances the native form with prefetching, client-side navigation, and a JavaScript-free fallback.

Syntax

<Form action="/path">...</Form>

Parameters

Name	Type	Description
`action`	`string \| function`	Destination URL or path, or a function that receives submitted FormData.
`scroll`	`boolean`	Whether to scroll to the top after navigation.

Returns

A React component that renders an enhanced HTML form.

Key points

Form retains the familiar HTML form model while adding Next.js-specific behavior.
Its main enhancements are route-related prefetching, client-side transitions, and a no-JavaScript fallback.
A URL string action produces GET-style navigation rather than a mutation request.
Named controls become query parameters in the destination URL.
The destination's shared route UI can be prefetched once the component is visible.
An empty action string keeps the current route while changing its query parameters.

Example: Search with client-side navigation

import Form from 'next/form'

export default function SearchForm() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Search</button>
    </Form>
  )
}

This form submits the query as a URL search parameter and navigates to the search route.

When to use it

Search forms

Collect a search term and navigate to a results route with the term in the URL.

URL-driven filters

Keep the current route while updating filters represented by query parameters.

Server-side actions

Submit a form to a Server Action that receives FormData and performs server-side work.

Interview questions

QHow does Form differ from a native HTML form?

Form is an enhanced HTML form imported from next/form. With a string action, it uses GET semantics, encodes controls into URL search parameters, and performs client-side navigation.

Follow-up: What happens when action is a function? The function receives the submitted FormData, so the form invokes a Server Action rather than navigating to a URL.

QWhat performance behavior does Form add?

When the form enters the viewport, Next.js can prefetch the target route's shared UI, including loading UI. Submission then navigates immediately and can display that loading state while the result loads.

Follow-up: Why is this useful for search? A search form commonly navigates to a results route, so prefetching reduces the apparent transition delay.

QHow does Form support progressive enhancement?

String actions preserve the browser's normal form behavior while adding client-side navigation. If JavaScript has not loaded, the submission still works through a full-page navigation.

Follow-up: What should be used for a mutation? Use a function action backed by a Server Action when the form should invoke server-side logic instead of changing the URL.

loading UI
client-side navigation
progressive enhancement
Server Actions
search params

Source: Form Component. Checked 2026-10-15.