A Deep Dive into Server Actions

Server Actions simplify data mutations in Next.js applications by allowing you to define and call server-side functions from your client components without manually creating API endpoints.

How It Works

By adding the 'use server' directive to a function, you mark it as a Server Action. React and Next.js handle the RPC-like communication behind the scenes.

'use server'

export async function createPost(formData) {
  const title = formData.get('title');
  const content = formData.get('content');
  
  // Validate data
  if (!title || !content) {
    throw new Error('Title and content are required');
  }
  
  // Save to database
  const post = await db.posts.create({
    data: { title, content, createdAt: new Date() }
  });
  
  return post;
}

This simplifies forms, data updates, and other interactions that require server-side processing.

Using Server Actions in Forms

Here's how you can use Server Actions with forms:

import { createPost } from './actions';

export default function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <textarea name="content" placeholder="Post content" required />
      <button type="submit">Create Post</button>
    </form>
  );
}

Error Handling and Validation

Server Actions can throw errors that are automatically caught by React:

'use server'

export async function updateUser(userId, formData) {
  try {
    const name = formData.get('name');
    
    if (!name || name.length < 2) {
      throw new Error('Name must be at least 2 characters long');
    }
    
    const user = await db.users.update({
      where: { id: userId },
      data: { name }
    });
    
    revalidatePath('/profile');
    return { success: true, user };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

Progressive Enhancement

One of the best features of Server Actions is that they work without JavaScript, providing true progressive enhancement.