server-actions

# Next.js Server Actions ## Overview Server Actions are asynchronous functions that execute on the server. They can be called from Client and Server Components for data mutations, form submissions, and other server-side operations. ## Defining Server Actions ### In Server Components Use the `'use server'` directive inside an async function: ```tsx // app/page.tsx (Server Component) export default function Page() { async function createPost(formData: FormData) { 'use server' const title = formData.get('title') as string await db.post.create({ data: { title } }) } return ( <form action={createPost}> <input name="title" /> <button type="submit">Create</button> </form> ) } ``` ### In Separate Files Mark the entire file with `'use server'`: ```tsx // app/actions.ts 'use server' export async function createPost(formData: FormData) { const title = formData.get('title') as string await db.post.create({ data: { title } }) } export async function deletePost(id: string) { await db.post.delete({ where: { id } }) } ``` ## Form Handling ### Basic Form ```tsx // app/actions.ts 'use server' export async function submitContact(formData: FormData) { const name = formData.get('name') as string const email = formData.get('email') as string const message = formData.get('message') as string await db.contact.create({ data: { name, email, message } }) } // app/contact/page.tsx import { submitContact } from '@/app/actions' ...