Migrate `serverValidate` from `@tanstack/form/next` to throw when errors occur

[crutchcorn]

Ideally the API should move from:

// action.ts
'use server'

// Notice the import path is different from the client
import { createServerValidate } from '@tanstack/react-form/nextjs'
import { formOpts } from './shared-code'

// Create the server action that will infer the types of the form from `formOpts`
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) => {
    if (value.age < 12) {
      return 'Server validation: You must be at least 12 to sign up'
    }
  },
})

export default async function someAction(prev: unknown, formData: FormData) {
  return await serverValidate(formData)
}

Which doesn't give a clear indication of when an error is validated or not to:

// action.ts
'use server'

// Notice the import path is different from the client
import { createServerValidate, ServerValidateError } from '@tanstack/react-form/nextjs'
import { formOpts } from './shared-code'

// Create the server action that will infer the types of the form from `formOpts`
const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) => {
    if (value.age < 12) {
      return 'Server validation: You must be at least 12 to sign up'
    }
  },
})

export default async function someAction(prev: unknown, formData: FormData) {
  try {
    await serverValidate(formData)
  } catch (e) {
    if (e instanceof ServerValidateError) {
      return e.formState;
    }
  }
}

This makes it much more clear how to handle the next steps and error handling, encourages defensive behavior, and more.

[chriscodingxyz]

Are there any single examples of tanstack form with Nextjs + server actions + zod validation + useActionState all in 1 place? I feel I have yet to find this displayed as intended (also validation onBlur not onChange)

I've been trying to figure it out but keep running into issues along the way