Next.js高级表单处理：整合Server Actions、FormData、react-hook-form和zod

// app/actions.ts
'use server'

import { z } from 'zod'

const UserSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  age: z.number().min(18, "Must be at least 18 years old")
})

export async function createUser(formData: FormData) {
  const data = Object.fromEntries(formData.entries())

  try {
    const validatedData = UserSchema.parse({
      ...data,
      age: Number(data.age)
    })

    // Here you would typically save to a database
    console.log('Creating user:', validatedData)

    return { success: true, data: validatedData }
  } catch (error) {
    if (error instanceof z.ZodError) {
      return { success: false, errors: error.errors }
    }
    return { success: false, errors: [{ message: 'An unexpected error occurred' }] }
  }
}

// app/components/UserForm.tsx
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { createUser } from '../actions'
import { useState } from 'react'

const UserSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  age: z.number().min(18, "Must be at least 18 years old")
})

type UserFormData = z.infer<typeof UserSchema>

export default function UserForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { register, handleSubmit, formState: { errors }, setError } = useForm<UserFormData>({
    resolver: zodResolver(UserSchema)
  })

  const onSubmit = handleSubmit(async (data) => {
    setIsSubmitting(true)
    const formData = new FormData()
    Object.entries(data).forEach(([key, value]) => formData.append(key, value.toString()))

    const result = await createUser(formData)

    if (result.success) {
      console.log('User created successfully', result.data)
      // Handle success (e.g., show success message, redirect)
    } else {
      result.errors.forEach(error => {
        setError(error.path as keyof UserFormData, { message: error.message })
      })
    }
    setIsSubmitting(false)
  })

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" {...register('name')} />
        {errors.name && <span>{errors.name.message}</span>}
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" {...register('email')} />
        {errors.email && <span>{errors.email.message}</span>}
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input id="age" type="number" {...register('age', { valueAsNumber: true })} />
        {errors.age && <span>{errors.age.message}</span>}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  )
}

// app/page.tsx
import UserForm from './components/UserForm'

export default function Page() {
  return (
    <div>
      <h1>Create User</h1>
      <UserForm />
    </div>
  )
}

// 这是一个简化的示例，展示 Next.js 如何处理 Server Actions
// 实际实现更复杂，涉及到 webpack 插件和运行时代码

// 客户端存根生成（构建时）
function generateClientStub(serverActionPath) {
  return `
    export default function clientStub(formData) {
      return fetch('/_next/server-action', {
        method: 'POST',
        body: formData,
        headers: {
          'X-Server-Action': '${serverActionPath}'
        }
      }).then(res => res.json());
    }
  `;
}

// 服务器端处理（运行时）
async function handleServerAction(req, res) {
  const actionPath = req.headers['x-server-action'];
  const formData = await parseFormData(req);

  const action = require(actionPath).default;
  const result = await action(formData);

  res.json(result);
}