Scribd
Upload
8 views

Next.js - Form Component

Uploaded by

edmonico19
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Next.js - Form Component

Uploaded by

edmonico19
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Page 1 of 7

Next.js - Form Component


The <Form> component in Next.js extends the functionality of the standard HTML
<Form> element. It supports all the attributes of the <form> tag, along with additional
props introduced by Next.js. In this chapter we will explore Form component, it's syntax,
features, props and examples.

Form Component in Next.js


The <Form> component of Next.js extends the HTML <form> element to provide extra
features such as client-side navigation on submission, prefetching of loading UI, and
progressive enhancement. It's useful for forms that update URL search params as it
reduces the boilerplate code needed to achieve the above.

Syntax

Following code shows syntax for basic usage of <Form> component in Next.js.

import Form from 'next/form' // import library

export default function Page() {


return (
<Form props="value">
{/* Form Elements */ }
<input type="text" name="name" />
<button type="submit">Submit</button>
</Form>
)
}

Props of Form Component


The following props can be passed to the <Form> component:

Props Description Example

The action prop is same as action attribute of HTML


action <form> tag. It describes action to preform or URL to href="/about"
navigate when user pressed submit button.

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 1/7
Page 2 of 7

Props Description Example

The replace prop is used to replace the current history


replace=
replace state instead of adding a new URL into the browser's
{true}
history stack.

The scroll prop is used to prevent scrolling to top of the


scroll scroll={false}
page when linked a page is opened.

The prefetch prop is used to prefetch form submission prefetch=


prefetch
page when submit button is visible in viewport. {false}

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.

The action Prop of Form Component


The action prop is used to specify an URL or route to navigate when user submits a form.
The value for this prop can be a string (represent URL to navigate) or a server side
function (To perform actions on server).

When the value action prop is a string, the <form> behaves like a native HTML form that
uses a GET method. The form data is encoded into the URL as search params, and when
the form is submitted. When action is a function (Server Action), the <form> behaves
like a React form. It will execute the action when the form is submitted.

Example

In the following code, we created a simple form in Next.js. When user click submit
button, form-submission page will be opened.

import Form from 'next/form'

export default function Page() {


return (
<Form action="/form-submission" >
<input type="text" name="name" />
<button type="submit">Submit</button>
</Form>
)
}

Output

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 2/7
Page 3 of 7

The image below shows output of above code. Here you can see that after submitting
form, the form-submission page is opened.

The replace Prop of Form Component


The replace prop determines how the browser's history is updated after the form
submission. When the replace prop is set to true, the new URL replaces the current entry
in the history stack instead of adding a new one. This prevents users from going back to
the previous form page, as it effectively overwrites the current history entry. This prop is
valid only if the value of action prop is a string.

Example

In the below code, after submitting form user will be redirected to form-submission page
and prevent moving back to form page.

import Form from 'next/form'

export default function Page() {


return (
<Form action="/form-submission" replace>
<input type="text" name="name" />
<button type="submit">Submit</button>
</Form>

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 3/7
Page 4 of 7

)
}

Output

The image below shows output of above code. Here you can see that after submitting
form, navigation back to form page is prevented.

The scroll Prop of Form Component


The scroll prop in the <Form> component of Next.js determines whether the page will
scroll to the top after submitting the form. By default, Next.js automatically scrolls to the
top of the page when a form is submitted. Setting the scroll prop to false disables this
behavior, keeping the current scroll position unchanged.

Example

In the below code, we added a top margin, so that form element become scrollable.
After submitting form the page will not scroll to top.

import Form from 'next/form'

export default function Page() {


return (
<Form action="/form-submission"

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 4/7
Page 5 of 7

scroll={false}
style={{ marginTop: '700px' }}>
<input type="text" name="example" />
<button type="submit">Submit</button>
</Form>
)
}

Output

The image below shows output of above code. Here you can see that after submitting
form, the page is not scrolled to top.

The prefetch Prop of Form Component


The prefetch prop in the <Form> component of Next.js controls whether the submission
path should be prefetched when the form becomes visible in the user's viewport. By

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 5/7
Page 6 of 7

default, Next.js prefetches routes when they appear in the users's viewport, so that the
subsequent navigation become instantaneous. Setting the prefetch prop to false disables
this behavior. This prop is valid only if the value of action prop is a string.

Example

In the below code, we added prefetch prop to form element. When user scroll to form
element, the form submission page will be prefetched.

import Form from 'next/form'

export default function Page() {


return (
<Form action="/form-submission" prefetch={true}>
<input type="text" name="example" />
<button type="submit">Submit</button>
</Form>
)
}

Output
The image below shows output of above code. Here you can see that before submitting
form, the form-submission page is prefetched in networks tab on browser Dev tools.

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 6/7
Page 7 of 7

https://www.tutorialspoint.com/nextjs/nextjs_form_component.htm 7/7

You might also like