next.js server action bind() example / pass argument

Server Action에서는 argument값을 전달할 수 없습니다. 

// update함수에 id값을 넣어서 action을 정의할 수 없다. 
<form action={update(id)}>

 

bind를 사용해서 전달이 가능합니다. 

// page.tsx
export default function Page({ id } : { id:number }){
  const updateWithId = update.bind(null, id);
  return (
      <form action={updateWithId}>        
        ...
      </form>
    )  
}

// actions.ts
'use server'

export async function update(id: string, formData: FormData){
   // ...
   await sql`
     UPDATE user
     SET status = ${status}
     WHERE id = ${id}
   `
 }

 

데이터 노출이 가능한경우 hidden 속성을 사용해서 전달할 수 있습니다. 

<input type="hidden" name="id" value={id} />