Stop Writing API Routes: Next.js Server Actions

The Client-to-API Friction

In traditional React Single Page Applications (SPAs), submitting a simple form requires an exhausting amount of boilerplate. You have to build a dedicated backend API route, write a client-side fetch request, manage loading states, handle cross-origin resource sharing (CORS), and manually sync the UI with the newly mutated data.

At Smart Tech Devs, we accelerate our frontend development velocity by adopting Server Actions in the Next.js App Router. This architecture allows us to execute secure backend code directly from client-side interactions, entirely eliminating the need for intermediary API endpoints.

The Server Actions Paradigm

Server Actions are asynchronous functions that run exclusively on the server. They can be called directly from React components—even Client Components—blurring the line between the frontend and backend.

Step 1: Defining the Server Action

We create a dedicated file for our actions and use the "use server" directive. Inside this function, we can securely interact with our database, as this code will never be shipped to the browser.

'use server';

import db from '@/lib/database';
import { revalidatePath } from 'next/cache';

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;
  
  if (!title) throw new Error('Title is required');

  // Securely mutate the database directly
  await db.project.create({
    data: { title }
  });

  // Purge the cache so the UI updates instantly
  revalidatePath('/dashboard');
}

Step 2: Client Integration

You can wire this Server Action directly into a standard HTML form's action attribute. Because it leverages native web APIs, the form can even submit before the JavaScript bundle has fully loaded (Progressive Enhancement).

import { createProject } from '@/actions/projectActions';
import { SubmitButton } from '@/components/SubmitButton';

export default function NewProjectForm() {
  return (
    <form action={createProject} className="flex flex-col gap-4">
      <input 
        type="text" 
        name="title" 
        placeholder="Enter project name..." 
        className="border p-2"
        required
      />
      
      {/* A custom button using useFormStatus() for loading states */}
      <SubmitButton /> 
    </form>
  );
}

The Engineering ROI

By adopting Server Actions, you drastically reduce codebase complexity. You eliminate the need for dozens of boilerplate API routes, achieve end-to-end type safety automatically, natively handle loading and error states, and ensure your forms work seamlessly even on slow networks. It is the fastest way to mutate data in modern React.