Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
With action.bind(null, value), the bound value becomes the action’s first argument, ahead of the form’s automatically supplied FormData. Declare the Server Action in the same order:
const updateUserWithId = updateUser.bind(null, userId)
async function updateUser(userId: string, formData: FormData) {
'use server'
// Validate and authorize before updating.
}How bound arguments and FormData are ordered
JavaScript’s bind supplies its bound arguments before arguments passed when the function is later called. When a form invokes the bound action, Next.js supplies the form’s FormData. So the resulting order is:
- Any values bound with
.bind, in the order they were bound. - The form’s
FormData.
For example, if you bind a user ID, declare the action as updateUser(userId, formData), not updateUser(formData, userId). Form fields remain available through formData; binding an extra value does not replace them. Next.js documents this pattern in its forms guide.
How to pass an ID to a Server Action form
Bind the ID where you create the form’s action, then accept it before FormData in the server function. The action may be passed to a form in a Server Component or imported into a Client Component from a file marked with 'use server'. Next.js documents binding as supported in both environments and as compatible with progressive enhancement.
#1 Best Overall
// Server Action
async function updateUser(userId: string, formData: FormData) {
'use server'
// Authenticate, authorize, validate, then perform the update.
}
// Bind the extra value before passing the action to a form
const updateUserWithId = updateUser.bind(null, userId)
// <form action={updateUserWithId}>...</form>When debugging, write down the function’s arguments at each layer: bound values first, any state parameter added by a wrapper next, and the form data last. Then check the signature documented for the specific wrapper you are using.
What changes when useActionState is involved?
useActionState changes the action contract by adding previous state as the first parameter. Next.js describes this parameter as prevState or initialState. If you also bind an ID, account for both the bound value and the state parameter rather than copying a signature that leaves one out. Read the wrapper call and function declaration together; an omitted parameter can make subsequent arguments appear shifted. See the Next.js forms guide for forms and action usage.
Rank #2
Should you use bind or a hidden input?
Use .bind when the value is an extra argument to the action. Use a hidden input when the value belongs in the form’s ordinary submitted data and should be read from FormData. A hidden input’s value appears in rendered HTML and is not encoded, so choose based on data flow—not on an assumption that either method makes a value trustworthy.
Validate and authorize every submitted value
A bound ID is not proof that the caller may act on the corresponding record. Next.js warns that Server Functions can be reached through direct POST requests and says to verify authentication and authorization in every function. Before a sensitive mutation, validate the input and authorize access to the referenced resource on the server. Return only the data the UI needs. The guidance appears in Next.js documentation on mutating data and the use server directive.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
