What's the recommended way to use useExtracted with Zod schemas?

[sss-Mihail-sss]

I'm experimenting with useExtracted and trying to understand the recommended pattern for form validation with Zod.

With traditional translation keys, I would usually keep the schema independent from i18n and translate validation errors separately. However, useExtracted relies on extracting message literals at build time, so dynamic translation of error messages doesn't seem to fit very well.

For example, I currently see two possible approaches.

Option 1: Keep the schema independent from translations

import * as z from 'zod/mini';

const schema = z.object({
  name: z.string('invalidName').check(z.trim(), z.minLength(1, 'requiredName'))
});

Then translate errors separately in the UI.

The issue is that useExtracted cannot extract messages from dynamic values such as:

t(error.message);

Option 2: Inject translated messages into the schema

interface SchemaMessages {
  invalidName: string;
  requiredName: string;
}

const createSchema = (messages: SchemaMessages) =>
  z.object({
    name: z.string(messages.invalidName).check(
      z.trim(),
      z.minLength(1, messages.requiredName)
    )
  });

export function Form() {
  const t = useExtracted();

  const schema = createSchema({
    invalidName: t('Name is invalid'),
    requiredName: t('Name is required')
  });

  // ...
}

This works with extraction because the message literal is visible to useExtracted, but it also means the schema becomes locale-dependent and has to be recreated per locale.

Questions

1. Is Option 2 the intended/recommended approach when using useExtracted with validation libraries such as Zod?
2. Are there plans for a better pattern for validation libraries that produce dynamic errors?
3. How would you recommend handling reusable schemas that need to work both on the client and server while still benefiting from message extraction?

[amannn]

I can recommend this approach: https://next-intl.dev/docs/environments/actions-metadata-route-handlers#server-actions-zod

[sss-Mihail-sss]

@amannn I'd like to use ZOD schemas on the client side without server actions, along with react-hook-form or @tanstack/react-form. Is it possible to use useExtracted together with useTranslations?

[amannn]

Yep, both can be used in the same codebase. I don't have docs written up at this point yet, but what you likely want to use is distinct folders for where useExtracted extracts to and where messages for useTranslations are loaded from. You can merge both then in i18n/request.ts.

[sss-Mihail-sss]

Is that what you mean?

// src/i18n/request.ts
export default getRequestConfig(async ({ locale }) => {
  if (!locale) {
    const paramValue = await rootParams.locale();

    if (hasLocale(locales, paramValue)) {
      locale = paramValue;
    } else {
      notFound();
    }
  }

  const messages = {
    ...(await import(`../../messages/extracted/${locale}.json`)).default,
    validation: (await import(`../../messages/validation/${locale}.json`)).default,
  };

  return {
    locale,
    messages,
    formats,
  };
});

// next.config.ts
const withNextIntl = createNextIntlPlugin({
  experimental: {
    extract: true,
    srcPath: './src',
    messages: {
      path: './messages/extracted',
      format: 'json',
      locales: 'infer',
      sourceLocale: 'ru',
      precompile: true,
    },
  },
});

export default withNextIntl(nextConfig);

usage

export function FieldErrors({
  className,
  errors,
  ...props
}: ComponentProps<'div'> & {
  errors?: ({ message: string } | undefined)[];
}) {
  const t = useTranslations('validation');

  if (!errors || errors.length === 0) {
    return null;
  }

  const messages = [...new Set(errors.map((error) => error?.message))];

  return (
    <div role="alert" data-slot="field-error" className={cn('font-normal text-error text-xs', className)} {...props}>
      {messages.length === 1 ? (
        t.has(messages[0]) ? (
          t(messages[0])
        ) : (
          messages[0]
        )
      ) : (
        <ul className="flex list-inside list-disc flex-col gap-1">
          {messages.map((message) => (
            <li key={message}>{t.has(message) ? t(message) : message}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

[amannn]

Yep, that looks good to me! 💯