Revalidating After a Mutation

After an action saves data, cached pages still show the old value. Call revalidatePath or revalidateTag inside the action. Next.js then sends the updated UI back in the same response as the action result: one round trip.

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function deleteProduct(id: number) {
  await requireAdmin();
  await prisma.product.delete({ where: { id } });
  revalidatePath('/admin/products');
  redirect('/admin/products'); // redirect after revalidate; redirect throws, so it comes last
}

A form action receives only FormData. Use bind to add the id:

import { deleteProduct } from './actions';

export default function DeleteButton({ id }: { id: number }) {
  const deleteWithId = deleteProduct.bind(null, id);
  return (
    <form action={deleteWithId}>
      <button className="text-red-600">Delete</button>
    </form>
  );
}

<form action={deleteWithId}>  ── POST (action id + form data) ──►  server
                                                             │ deleteProduct(42)
                                                             │ revalidatePath('/admin/products')
browser updates list  ◄── action result + new RSC payload ───┘