Server Action with “after” Callback

This example demonstrates the new “after” callback functionality in Next.js 15 Server Actions. The form submission happens on the server, but client-side logic runs afterward.

How Server Action “after” Works

The “after” functionality is implemented client-side, running code after the server action completes:

// Server actions file (actions.ts)
'use server';

export async function submitFormAction(formData: FormData) {
  // Server-side logic here...
  return { success: true, message: 'Success!' };
}

// Client component
async function handleSubmit(formData: FormData) {
  // Call the server action
  const result = await submitFormAction(formData);

  // This is the "after" callback functionality
  // It runs after the server action completes
  if (result.success) {
    // Client-side effects like state updates, redirects, etc.
  }
}

// Use it with the form
<form action={handleSubmit}>
  {/* Form fields */}
</form>