Flavio Copes

Learn how to pass an `id` to a server action in Next.js. The guide covers the simplest method using hidden input fields and an alternative approach using the `bind()` method. It includes practical code examples for both techniques.

Next.js, passing an id to a server action

Question: what is the advantage of passing the id in an hidden input field compared to let say passing it directly as an argument (if we don’t need any other forma data)?
Eg:
<pre><code class="language-ts">&#x27;use client&#x27;

import { use } from &#x27;react&#x27;
import type { Todo } from &#x27;@/app/types.ts&#x27;
import { deleteTodo } from &#x27;@/app/todos/actions/deleteTodo&#x27;

export function TodosList({ promise }: { promise: Promise&lt;Todo[]&gt; }) {
 const rows = use(promise)

 return (
 &lt;div&gt;
 {rows.map((row) =&gt; {
 return (
 &lt;div key={row.id}&gt;
 {row.text}

 &lt;form action={() =&gt; deleteTodo(row.id)}&gt;
 &lt;input type=&#x27;hidden&#x27; name=&#x27;id&#x27; value={row.id} /&gt;
 &lt;button type=&#x27;submit&#x27;&gt;x&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 )
 })}
 &lt;/div&gt;
 )
}
</code></pre>
<pre><code class="language-ts">&#x27;use server&#x27;

import { sql } from &#x27;@vercel/postgres&#x27;
import { revalidatePath } from &#x27;next/cache&#x27;

export async function deleteTodo(id: number) {
 // some validation...

 // mutate data
 await sql`DELETE FROM todos WHERE id = ${id}`

 // revalidate cache
 revalidatePath(&#x27;/todos&#x27;)
}
</code></pre>