The new Form Component from Next.js 15

Next.js 15 has just released and it has come with a new Form Component. This new Form Component is especially useful for forms that redirect to a new url for example when you try to search for blog posts and that redirects to a page that displays all the blog posts with that specific query.

How does it look

You can start using the new Form Component with Next.js 15. If we take my example that I just mentioned it would look something along the lines of this:

Benefits

As you can imagine this will have some additional benefits rather than using the default native form element. A benefit will be that Next.js will preload/prefetch the layout.ts and loading.ts files.

Another benefit is that the navigation will happen partially. This means that the client state will be kept and that the shared UI will stay in place, which will result in better performance for your website and ultimately a better user experience for your users.

Additional parameters

As we have touched the default Form component and its properties there are still some additional options you can provide the following properties:

• action: The url or path that the form needs to navigate towards. An empty "" will submit the form and update the current path with the search parameters
• replace: Replaces the current history state rather than pushing a new one
• scroll: Controls the scrolling behaviour, the default will make it scroll to the top of the page
• prefetch: Determines if the path should be prefetched or not

Conclusion

This new form component will be a joy to use and will make sure submissions that rely on a navigational component are handled correctly and as user friendly as possible. All in all it has its use cases and will not be used for all forms but it sure is a nice addition to this new Next.js Release.