Server Actions

Server Actions in Next.js allow you to call server-side functions directly from your client components, eliminating the need to manually create API routes.

Overview

Server Actions are:

Type-safe: Full TypeScript support
Secure: Executed on the server only
Simple: Just mark a function with 'use server'
Seamless: Can be called directly from client components

Basic Usage


'use server';
 
export async function submitForm(formData: FormData) {
  // This runs on the server
  const data = Object.fromEntries(formData);
  // Process your data...
  return { success: true };
}

Then use it from a client component:


'use client';
 
import { submitForm } from './actions';
 
export function MyForm() {
  return (
    <form action={submitForm}>
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Best Practices

Keep server actions in separate files (e.g., actions.ts)
Always define the 'use server' directive at the top
Use TypeScript for better type safety
Handle errors appropriately
Validate and sanitize input on the server

Learn More

For more information, check the Next.js Server Actions documentation .