Server Actions

Master Server Actions in Next.js — the paradigm shift for form handling and mutations that eliminates API routes for internal data changes.

// actions/product.ts
'use server';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@/lib/db';
import { requireAuth } from '@/lib/auth';
import { z } from 'zod';

const UpdateProductSchema = z.object({
  name: z.string().min(1),
  price: z.coerce.number().positive(),
});

export async function updateProduct(formData: FormData) {
  const session = await requireAuth();

  const result = UpdateProductSchema.safeParse({
    name: formData.get('name'),
    price: formData.get('price'),
  });

  if (!result.success) {
    return { error: result.error.issues[0].message };
  }

  await db.product.update({
    where: { id: formData.get('id') as string },
    data: result.data,
  });

  revalidatePath('/products'); // Invalidate the products page cache
  redirect('/products'); // Redirect after success
}

// app/products/[id]/edit/page.tsx
import { updateProduct } from '@/actions/product';

export default async function EditProductPage({ params }: { params: { id: string } }) {
  const product = await db.product.findUnique({ where: { id: params.id } });

  return (
    <form action={updateProduct}> {/* Server Action as form action */}
      <input type="hidden" name="id" value={product.id} />
      <input name="name" defaultValue={product.name} />
      <input name="price" type="number" defaultValue={product.price} />
      <button type="submit">Save</button>
    </form>
  );
}

Server Actions represent a return to the server-centric model — mutations happen on the server, clients just trigger them. This is actually closer to how traditional MVC frameworks work (Rails, Django), but with the DX of React. The elimination of API routes for internal mutations significantly reduces the surface area for security vulnerabilities.