Server Actions in Next.js: When to Use Them Over API Routes

Summary: Server Actions in Next.js

Server Actions are async functions marked with 'use server' that run only on the server but can be called directly from Client Components.

They replace many simple use cases for API routes (like toggling settings, handling form submissions, or managing cookies) without needing separate route files.

Core Capabilities

Run exclusively on the server

Callable from Client Components

Access to cookies, headers, database, and other server-only APIs

No manual request/response handling or API route boilerplate

Example: Disabling Draft Mode

A Server Action to turn off Sanity draft mode and clear the draft cookie:

```ts

// app/actions/draft.ts

'use server'

import { draftMode } from 'next/headers'

export async function disableDraftMode() {

(await draftMode()).disable()

await new Promise((resolve) => setTimeout(resolve, 1000))

}

```

Used from a Client Component:

```tsx

'use client'

import { useRouter } from 'next/navigation'

import { disableDraftMode } from '@/app/actions/draft'

export function DisableDraftMode() {