Server actions are defined in a separate .ts file marked with the 'use server' directive.
This tells React what is in that file can only run on the server, and can be called from a client component:
//actions.ts
'use server'
async function myServerAction(formData) => {
//we are on the server, we can directly
//do something with the form data
}
In a client component:
'use client'
import { myServerAction } from './actions'
export const Demo = () => {
return (
<div>
<form action={myServerAction}>
<input
type='text'
name='fullName'
/>
<button type='submit'>Submit</button>
</form>
</div>
)
}