Usage with zod and next-safe-action

[ScreamZ]

Hello, I would like to use https://next-safe-action.dev/docs/recipes/i18n as you can see you're injecting the translate function.

Is there any way to get the proper type of this function (on server and client ? getTranslations and useTranslations ?) for something isomorphic ?

I would like to reuse the schema on client and server side.

[amannn]

Getting the types for t right is unfortunately a bit cumbersome, therefore I generally suggest to not pass the function anywhere but to use it right where it is retrieved.

The linked example code looks like this:

async function getSchema() {
  // This is an example of a i18n setup.
  const t = await getTranslations();
  return mySchema(t); // this is the schema that will be used to validate and parse the input
}

What is the implementation of mySchema here? Can you construct the schema in getSchema directly and call t as necessary there?

/cc @TheEdoRan

[amannn]

Thanks for chiming in here @TheEdoRan!

zod-i18n works by calling z.setErrorMap. That certainly works, but that sets the errors globally. Especially for a use case like Server Actions, where a server is expected to be stateless, I guess it would be beneficial to avoid overriding the global error map on every request (could also lead to race conditions when multiple requests are handled concurrently).

I can think of the following options:

1. Providing localized labels while parsing using an existing schema (my example above)
2. Creating a new schema on every request while attaching localized labels (that's what the sample from @ali-alharthi does: schema.ts). I think this implementation has a few downsides: a) It's cumbersome to type the t function correctly (the original request in this issue), b) the schema needs to be created on every request, c) all localized labels have to be generated upfront, even though they might not be used.
3. Does next-safe-action provide a mechanism to catch a validation error and transform the data structure? I've seen the onError callback in your docs, but I'm not really familiar with the library. Does the callback consider a return value?

If (1) isn't supported by next-safe-action currently, could (3) maybe be a good alternative?

[TheEdoRan]

3. Yes, via handleValidationErrorsShape passed to the schema method, this might be the solution.

[amannn]

Yes, via handleValidationErrorsShape passed to the schema method, this might be the solution.

That could be something for you to have a look at @ScreamZ.

[ali-alharthi]

@amannn Regarding point no. 2, I do agree on the downsides you have mentioned.
However, the provided example was to try and explain what @jeltehomminga was talking about in his discussion as we faced the same challenge as well in one of our projects. Also, it seemed the "easier way" for us to get next-safe-action, zod and next-intl to work at that time.

[ScreamZ]

Hello boyz!

Just tested the given solution from @amannn using the new wrapper for hook form by @TheEdoRan

  const { form, action } = useHookFormAction(
    sendEmailAuthAction,
    zodResolver(sendEmailAuthSchema, {
      errorMap: (issues) => {
        if (issues.path.includes("email")) {
          return { message: t("Errors.invalid-email") };
        } else {
          return { message: t("Errors.generic") };
        }
      },
    })
  );

Here is the code. This works, but this remains very very verbose for not much. Also you have to write deep code and not just rely on path to know at which segment the error occurs (is it in .email ? .refine ? other)

Well I still recommended injecting the t function as simple as follow:

// i18n/types.ts
import type { useTranslations } from "next-intl";
import type { getTranslations } from "next-intl/server";

export type TFn =
  | ReturnType<typeof useTranslations<never>>
  | Awaited<ReturnType<typeof getTranslations<never>>>;

Then usage like this

// In a separated file (not the one with "use server"

// Import the previous TFn
export const sendEmailAuthSchema = (t: TFn) =>
  z.object({
    email: z
      .string()
      .email(t("Errors.invalid-email"))
      .refine((email) => !email.includes("+"), t("Errors.no-subdomain")),
  });

// Client side
const t = useTranslations()
const { form, action } = useHookFormAction(sendEmailAuthAction(t), zodResolver(sendEmailAuthSchema(t)));

 // Server side
export const sendEmailAuthAction = publicAction
  .schema(async () => sendEmailAuthSchema(await getTranslations()))
  .action(async ({ parsedInput: { email } }) => {
// ...
})

Easy peasy, and cross platform support.

[ScreamZ]

I'm thinking of using something like https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-external-libraries to conditionnaly use getTranslations or useTranslations depending on we are on server or client side. By checking typeof window