Server Actions

Handles Next.js Server Actions for form submissions, mutations, and server-side operations in the App Router. Covers the 'use server' directive, FormData handling, validation with Zod, useFormState for error handling, useFormStatus for loading states, and revalidatePath/revalidateTag for cache invalidation. The examples are practical and span the common cases: basic forms, optimistic updates, authentication checks, and redirects after mutations. It's comprehensive enough that you won't need to context-switch to the docs for most form and data mutation work. The security section is brief but hits the important points about validation and authorization.

skills.sh installs: 203
GitHub stars: 3.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davepoon/buildwithclaude --skill server-actions --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

// 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':

// 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 } })
}