In Next.js, server actions, (the files started with a little 'use server' at the top), are asynchronous functions that simplify form management. They can be incorporated into both Server and Client Components, promoting code reuse and efficiency. Specifically, 'use server' is used in Server Components, while Client Components can employ Server Actions for form processing.
This can help manage form submissions and related data changes, offering features like pending submissions in Client Components. They also work with Next.js' caching and revalidation system, meaning you have only one trip and all your UI updates and data management is sorted.
Formspark is an innovative solution that allows you to collect and save information from your website forms without setting up a server. If you want two great reasons to use it:
- It's stupidly fast
- It's studidly cheap
Simply, it just takes managing the data bit of forms out of the equation.
Implementing Formspark in Next.js with server action is quite straightforward so we thought we'd throw together a quick fix guide, because in our opinion this is the defacto method of setting up a simple form without breaking out the backend skills.
For all you out there thinking of trying to skip the frontend step as well, we actually built the following contact form from V0.dev. It's basically precisely what this tool was made for.
This is the code where all the magic happens we are using React’s new hooks
- useFormState The useFormState hook in React allows for creating and managing component states in response to form actions. It pairs an action function with an initial state, returning a new action and the latest form state for use in forms. This enables dynamic updating of form state and supports server actions for immediate response display. more here
- useFormStatus The useFormStatus hook in React provides status information about the last form submission, such as whether it's pending. It's used within a form component to dynamically enable or disable elements like a submit button based on the form's submission status. This hook returns an object containing properties like pending, data, method, and action to manage form interactions efficiently. more here
This code defines two components, SubmitButton and Form.
The SubmitButton enhances the user experience by displaying a loader during the form submission process. Nice
The Form state holds information about possible errors and the status of the form submission. Depending on this state, the component presents different user interfaces: if the form is successfully submitted without errors, a success message is displayed. If there's an error during submission, an error message is shown. When the form is still in the process of being filled out, the actual form is rendered.
This code is a server action function for form submission. It takes three parameters: the form ID, the state of the form, and the form data itself. It extracts the data from the form entries. and sends a POST request to the Formspark URL with the form data. If an error occurs during the request, it logs the error and returns an error message
Here’s the github link for the complete tutorial: link
We hope you enjoyed the tutorial, and if there's anything that isn't clear, give us a shout. We're always trying to ensure we pass on knowledge in a way that doesn't feel like you're reading a dictionary front to back.