Suleman Ahmed | Software Engineer | Full-Stack Developer

In Next.js 14, Server Actions represent a fundamental shift in how developers handle data mutations. Instead of creating an API endpoint, defining request bodies, and fetching from the client, you can write server-side code that runs directly in response to user actions.

What are Server Actions?

Server Actions are asynchronous functions that are executed on the server. They can be defined in Server Components or exported from separate files. They integrate tightly with forms, allowing progressive enhancement where the form works even if JavaScript hasn't loaded yet.

A Complete Example

Here is how you define a Server Action to handle user feedback and save it to a database:

app/actions.tstypescript

'use server';

import { revalidatePath } from 'next/cache';

export async function submitFeedback(formData: FormData) {
  const email = formData.get('email');
  const message = formData.get('message');

  if (!email || !message) {
    return { error: 'All fields are required.' };
  }

  // Simulate database save
  console.log(`Saving feedback from ${email}: ${message}`);
  await new Promise((resolve) => setTimeout(resolve, 1000));

  // Revalidate cache to update UI
  revalidatePath('/feedback');

  return { success: true };
}

And here is the React component using this Server Action:

app/feedback/FeedbackForm.tsxtypescript

'use client';

import { submitFeedback } from '../actions';
import { useState } from 'react';

export default function FeedbackForm() {
  const [status, setStatus] = useState<string>('');

  async function handleAction(formData: FormData) {
    setStatus('Submitting...');
    const result = await submitFeedback(formData);
    if (result.error) {
      setStatus(result.error);
    } else {
      setStatus('Feedback submitted successfully!');
    }
  }

  return (
    <form action={handleAction} className="flex flex-col gap-4 max-w-md mx-auto">
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        required
        className="border p-2 rounded"
      />
      <textarea
        name="message"
        placeholder="Your Feedback"
        required
        className="border p-2 rounded"
      />
      <button type="submit" className="bg-blue-600 text-white p-2 rounded">
        Send Feedback
      </button>
      {status && <p className="text-sm font-medium">{status}</p>}
    </form>
  );
}

Key Benefits

Server Actions offer multiple benefits for modern applications:
Reduced Boilerplate: No need to define API endpoints or fetch wrappers.
End-to-End Type Safety: Easily share types between client and server code.
Progressive Enhancement: Forms work natively even with JavaScript disabled.

In conclusion, Server Actions simplify full-stack React development, bringing frontend and backend interaction closer than ever before.

Suleman Ahmed - BlogNext.js 14 Server Actions: A Paradigm Shift in Data Mutation

What are Server Actions?

A Complete Example

Key Benefits

More Articles

A Guide to Effective Unit Testing with Vitest and React Testing Library

Tailwind CSS v4: The Future of Utility-First CSS

React 19 Server Components: What You Need to Know