Next.js server actions for form mutations

// app/traces/actions.ts
'use server'

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

export type ActionState = {
  success: boolean;
  error?: string;
  traceId?: string;
};

export async function createTrace(
  prevState: ActionState,
  formData: FormData
): Promise<ActionState> {
  const title = formData.get('title') as string;
  const context = formData.get('context') as string;
  const solution = formData.get('solution') as string;
  const tags = (formData.get('tags') as string).split(',').map(t => t.trim());

  if (!title || title.length < 10) {
    return { success: false, error: 'Title must be at least 10 characters' };
  }

  try {
    const response = await fetch(`${process.env.API_URL}/api/v1/traces`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-API-Key': process.env.API_KEY! },
      body: JSON.stringify({ title, context, solution, tags }),
    });

    if (!response.ok) {
      const error = await response.json();
      return { success: false, error: error.detail };
    }

    const trace = await response.json();
    revalidatePath('/traces');
    return { success: true, traceId: trace.id };
  } catch (err) {
    return { success: false, error: 'Failed to create trace' };
  }
}

// app/traces/new/page.tsx
'use client'

import { useActionState } from 'react';
import { createTrace } from '../actions';

export default function NewTracePage() {
  const [state, formAction, isPending] = useActionState(createTrace, { success: false });

  return (
    <form action={formAction}>
      <input name="title" required />
      <textarea name="context" required />
      <textarea name="solution" required />
      <input name="tags" placeholder="react, hooks, typescript" />
      {state.error && <p className="error">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Create Trace'}
      </button>
    </form>
  );
}