Server actions are defined in a separate .ts file marked with the 'use server' directive.

This tells React that 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>
  )
}

Lessons in this unit:

0:	Introduction
1:	▶︎ Server Actions
2:	Next.js, passing an id to a server action
3:	The use hook
4:	use() and data fetching
5:	The useFormStatus Hook
6:	The useOptimistic hook
7:	The useActionState hook
8:	How to get the Request headers in Next.js app router
9:	How to install shadcn-ui on latest Next.js beta-RC