Getting Started
Core Concepts
Troubleshooting
Interactive forms and mutations allow users to send data back to the server to update application state, save records, or perform actions. Next.js provides a specialized <Form> component and server-side processing mechanisms to make building these flows straightforward and efficient.
When a user interacts with a form, Next.js handles route prefetching, data submission, and navigation seamlessly without needing complex client-side event handlers for standard routing forms.
Interactive forms allow users to submit data or navigate to new pages based on user input. The <Form> component extends standard HTML form behavior by adding automatic prefetching for navigation targets and supporting modern client-side features.
import Form from 'next/form'action prop. The can either be a navigation path (string) or a submission function (Server Action).
actionexport default function Page() {
return (
<Form action="/search">
<input name="query" placeholder="Search..." />
<button type="submit">Submit</button>
</Form>
)
}Tip
When a form's action is set to a path string (like "/search"), Next.js automatically prefetches the destination route as soon as the form becomes visible in the user's viewport.
When you want to perform a mutation—such as writing to a database or updating records—pass a function to the action prop instead of a URL string.
async function action(formData: FormData) {
'use server'
const username = formData.get('username')
// Process and save data on the server
}
export default function Page() {
return (
<Form action={action}>
<input name="username" defaultValue="JaneDoe" />
<button type="submit">Save Changes</button>
</Form>
)
}When configuring your <Form>, you can use the following props:
Warning
Passing prefetch, replace, or scroll to a <Form> whose action is a function (Server Action) has no effect, as these properties only apply to URL navigations.
Note
Unsupported HTML form attributes such as method, encType, and target are disallowed on the <Form> component to ensure proper client-side routing behavior.
Caution
File inputs are only supported when your form action is a function (Server Action). If your form action is a string path, file inputs cannot be encoded into URL search parameters.