docs(nextjs-ssr): clarify need for HTML name attribute in form submissions (#1574)

jamestrenda · LeCarbonator · web-flow · commit b4388e751cfe · 2025-08-04T16:21:56.000+02:00
* docs(nextjs-ssr): clarify need for HTML name attribute in native form submissions add inline comments to client components in next.js server action examples highlighting the need to explicitly set the name attribute on input fields for native POST submissions (e.g. with Next.js Server Actions). This avoids confusion where inputs may otherwise be omitted from formData. closes #1565 * docs: change hardcoded name to field name --------- Co-authored-by: LeCarbonator <18158911+LeCarbonator@users.noreply.github.com>
diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md
@@ -147,7 +147,7 @@ function Home() {
           return (
             <div>
               <input
-                name="age"
+                name={field.name}
                 type="number"
                 value={field.state.value}
                 onChange={(e) => field.handleChange(e.target.valueAsNumber)}
@@ -293,7 +293,7 @@ export const ClientComp = () => {
           return (
             <div>
               <input
-                name="age"
+                name={field.name} // must explicitly set the name attribute for the POST request
                 type="number"
                 value={field.state.value}
                 onChange={(e) => field.handleChange(e.target.valueAsNumber)}
diff --git a/examples/react/next-server-actions/src/app/client-component.tsx b/examples/react/next-server-actions/src/app/client-component.tsx
@@ -37,7 +37,7 @@ export const ClientComp = () => {
           return (
             <div>
               <input
-                name="age"
+                name={field.name} // must explicitly set the name attribute for the POST request
                 type="number"
                 value={field.state.value}
                 onChange={(e) => field.handleChange(e.target.valueAsNumber)}
