Zod 로 Validation

'use server';
import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';

const CreatePost = z.object({
  title: z.string().min(1, 'Title is required').max(100),
  content: z.string().min(10, 'Content must be at least 10 characters'),
  email: z.string().email('Invalid email address'),
});

export type State = {
  errors?: { title?: string[]; content?: string[]; email?: string[] };
  message?: string;
};

export async function createPost(prev: State, formData: FormData): Promise<State> {
  const parsed = CreatePost.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    email: formData.get('email'),
  });

  if (!parsed.success) {
    return {
      errors: parsed.error.flatten().fieldErrors,
      message: 'Validation failed',
    };
  }

  await db.post.create({ data: parsed.data });
  revalidatePath('/posts');
  return { message: 'Post created' };
}

'use client';
import { useActionState } from 'react';
import { createPost, type State } from '@/app/actions';

export function PostForm() {
  const [state, action, pending] = useActionState<State, FormData>(createPost, {});
  return (
    <form action={action} className="space-y-3">
      <div>
        <input name="title" />
        {state.errors?.title?.map(e => <p key={e} className="text-red-500 text-sm">{e}</p>)}
      </div>
      <div>
        <textarea name="content" />
        {state.errors?.content?.map(e => <p key={e} className="text-red-500 text-sm">{e}</p>)}
      </div>
      <button disabled={pending}>{pending ? 'Saving&hellip;' : 'Create'}</button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}