app/actions.js 'use server'
 
export async function addItem() {
  // ...
}
app/components/example-client-component.js 'use client'
 
import { useTransition } from 'react'
import { addItem } from '../actions'
 
function ExampleClientComponent({ id }) {
  let [isPending, startTransition] = useTransition()
 
  return (
    <button onClick={() => startTransition(() => addItem(id))}>
      Add To Cart
    </button>
  )
}
Props
Although importing Server Actions is recommended, in some cases you might want to pass down a Server Action to a Client Component as a prop.
For example, you might want to use a dynamically generated value within the action. In that case, passing a Server Action down as a prop might be a viable solution.