Search and filtering
A search page needs to place the user's query in the URL while retaining App Router UI state.
Next.js 16+ · Module
next/form
Next.js’s <Form> component enhances HTML forms with progressive enhancement, prefetching, and client-side navigation. String actions use GET-style search parameters; function actions invoke a Server Action.
How it works
next/form provides a Next.js <Form> component for App Router forms. With a string action, it serializes named controls as URL search parameters and navigates client-side; it can also invoke a Server Action when action is a function.
Syntax
<Form action={string | function}>...</Form>Parameters
| Name | Type | Description |
|---|---|---|
action | string | function | URL or path to navigate to, or a Server Action to invoke when submitted. |
formAction | string | function | Submit-control override for a button or submit input. |
Returns
A React Form component rendered as an enhanced HTML form.
Key points
- It adds Next.js prefetching to the familiar HTML form model.
- A string destination uses GET semantics rather than a POST submission.
- Each successful named control contributes to the destination query string.
- Use an empty action when only the current route's query parameters should change.
- A visible string-action form can preload the destination's shared UI before submission.
- Individual submit controls can select a different destination from the form default.
Common mistakes
- Preventing the submit event cancels the component's built-in navigation behavior.
- String actions and function actions have different supported behavior; do not assume every prop applies identically.
Example: GET form with client-side navigation
import Form from 'next/form'
export default function SearchPage() {
return (
<Form action="/search">
<input name="query" placeholder="Search" />
<button type="submit">Submit</button>
</Form>
)
}Submitting navigates to /search?query=... with Next.js client-side navigation.
When to use it
Progressive route navigation
A form should navigate to a known route without implementing manual submit and router code.
Per-button destinations
Several submit controls need to target different destinations from one form.
Interview questions
QHow does next/form behave when action is a string?
With a string action, the component behaves like a native GET form: field values become URL search parameters, then Next.js performs client-side navigation instead of a full reload. This preserves shared UI and client-side state.
Follow-up: What happens when the action is a Server Action? The function is invoked on submission, while client-side navigation still occurs; this approach does not support prefetching.
QWhat does the action prop control?
The action string identifies the destination path. An empty string keeps the current route and updates its search parameters, while named form controls supply the encoded query values.
Follow-up: How would you submit to a different destination from one button? Use a button's formAction prop to override the form's action.
QWhy use Form instead of a native HTML form?
The component extends the HTML <form> element with progressive enhancement, prefetching for string destinations, and client-side navigation. It is especially useful when a form updates URL search parameters.
Follow-up: What is a key limitation of manually preventing submission? Calling preventDefault() overrides built-in behavior such as navigation to the specified URL.
Related
client-side navigationprefetchingloading UIServer Actionsearch paramsformAction