pass t function as props

[sahandsn]

for translating the error messages in zod, i wanted to pass the t function to a generator function zod. the idea works as intended on both dev and build mode. now i want to see if i can add typescript support. any idea how i can achieve this?

import { z } from "zod";

const USERNAME_MAX = 50;
const USERNAME_MIN = 2;

const PASSWORD_MAX = 50;
const PASSWORD_MIN = 2;

// HERE: how can i have proper ts support?
export const loginFormSchemaGenerator = (t: any) =>
  z.object({
    username: z
      .string({
        required_error: t("username-required"),
        invalid_type_error: t("username-type"),
      })
      .min(USERNAME_MIN, { message: t("username-min", { min: USERNAME_MIN }) })
      .max(USERNAME_MAX, { message: t("username-max", { max: USERNAME_MAX }) }),
    password: z
      .string({
        required_error: t("password-required"),
        invalid_type_error: t("password-type"),
      })
      .min(PASSWORD_MIN, { message: t("password-min", {min: PASSWORD_MIN}) })
      .max(PASSWORD_MAX, { message: t("password-max", {max: PASSWORD_MAX}) }),
  });

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { loginFormSchemaGenerator } from "@/schemas";
import { useTranslations } from "next-intl";

export default function MyForm() {
  const tr = useTranslations("LoginFormSchema");
  const loginFormSchema = loginFormSchemaGenerator(tr);

// ...


  return (
   //  ...
  );
}

[sahandsn]

is this even an accepted pattern?

[sahand-sn]

would love to see an answer as well

[AhmedBaset]

You can use this as the function type

import type { NestedKeyOf } from "next-intl";

type TranslateFn = (path: NextedKeyOf<IntlMessages>): string;

And make sure you have this somewhere in a .d.ts file

type Messages = typeof import("./../translations/en.json");

declare interface IntlMessages extends Messages {}

Or replace IntlMessage with typeof import("path/to/translation.json")

The tradeoff of this type is that you can't pass some of the path to use translation hook:

const t = useTranslation("namespace");
// it has to be
const t = useTranslation();

---

Another way I use with zod, is making the message is the key

const schema = z.object({
  password: z.string({ required_error: "errors.password-required" }).min(8, "errors.password-length");
})
// And, when rendering the error message I do:
<P>{error.message.startsWith("errors.") ? t(error.message) : error.message}</p>

// You can also prefix the localized messages with a fake prefix and remove it later
const schema = z.object({
  password: z.string({ required_error: "intl:login.password-required" }).min(8, "intl:login.password-length");
})
<P>{error.message.startsWith("intl:") ? t(error.message.replace("int:", "")) : error.message}</p>

// To get type completion for error messages, you can do:
```ts
// fake function
const t: TranslateFn = (key) => key;

const schema = z.object({
  password: z.string({ required_error: t("errors.password-required") }).min(8, t("errors.password-length"));
})

[sahandsn]

i liked the first one because of the ts support. but i get these two errors:

this is my global.d.ts:

import en from './messages/en.json';
 
type Messages = typeof en;
 
declare global {
  // Use type safe message keys with `next-intl`
  type IntlMessages = Messages
}

[sahandsn]

i ended up using working on the types extensively to get it write. now it fully supports typescript. it would be nice to have this type ready made in the package.

/types/translation-fn.ts

import { ReactNode } from "react";
import {
  Formats,
  TranslationValues,
  MarkupTranslationValues,
  RichTranslationValues,
} from "next-intl";

// Utility type to extract keys under a given namespace.
// This type recursively traverses the `IntlMessages` type `T` based on the namespace `N`.
// It returns the keys available under the specified namespace.
type ExtractKeysUnderNamespace<
  T, // The type representing your messages, e.g., `IntlMessages`.
  N extends string, // The namespace path, e.g., "Schemas.LoginForm".
> =
  // Check if the namespace `N` includes a dot, indicating nested namespaces.
  N extends `${infer K}.${infer Rest}`
    ? // If so, `K` is the first segment of the namespace.
      K extends keyof T
      ? // If `K` is a key of `T`, recurse into `T[K]` with the rest of the namespace.
        ExtractKeysUnderNamespace<T[K], Rest>
      : // If `K` is not a key of `T`, return `never` (invalid namespace).
        never
    : // If `N` does not include a dot (it's a single segment).
      N extends keyof T
      ? // If `N` is a key of `T`, check if `T[N]` is an object.
        T[N] extends object
        ? // If `T[N]` is an object, return its keys as strings.
          keyof T[N] & string
        : // If `T[N]` is not an object (no further nesting), return `never`.
          never
      : // If `N` is not a key of `T`, return `never`.
        never;

// Utility type to get the type at a given path.
// It recursively navigates the `IntlMessages` type `T` based on the path `P`.
// Returns the type of the message at the specified path.
type MessageTypeAtPath<
  T, // The type representing your messages, e.g., `IntlMessages`.
  P extends string, // The path to the message, e.g., "Schemas.LoginForm.username-required".
> =
  // Check if the path `P` includes a dot, indicating nested properties.
  P extends `${infer K}.${infer Rest}`
    ? // If so, `K` is the first segment of the path.
      K extends keyof T
      ? // If `K` is a key of `T`, recurse into `T[K]` with the rest of the path.
        MessageTypeAtPath<T[K], Rest>
      : // If `K` is not a key of `T`, return `never` (invalid path).
        never
    : // If `P` does not include a dot (it's a single segment).
      P extends keyof T
      ? // If `P` is a key of `T`, return its type.
        T[P]
      : // If `P` is not a key of `T`, return `never`.
        never;

// Utility type to build the full key path by combining the namespace and key.
// If the namespace is empty, it returns the key as is.
// Otherwise, it concatenates the namespace and key with a dot.
type FullKey<
  N extends string, // Namespace, e.g., "Schemas.LoginForm".
  K extends string, // Key within the namespace, e.g., "username-required".
> = N extends ""
  ? K // If namespace is empty, full key is just the key `K`.
  : `${N}.${K}`; // Otherwise, full key is `Namespace.Key`.

// Utility type to get the message keys under a namespace.
// It uses `ExtractKeysUnderNamespace` to obtain valid keys and ensures they are strings.
type MessageKey<N extends string> = ExtractKeysUnderNamespace<IntlMessages, N> &
  string;

// Utility type to extract all possible namespace paths from `IntlMessages`.
// It recursively builds a union of all valid namespace strings.
type NamespacePaths<
  T, // The type representing your messages, e.g., `IntlMessages`.
  P extends string = "", // The accumulated path (defaults to empty string).
> = T extends object
  ? {
      [K in keyof T]: T[K] extends object // Iterate over each key `K` in `T`.
        ? // If `T[K]` is an object (has nested properties).
          P extends ""
          ? // If the accumulated path `P` is empty, start building paths.
            | K // Include the current key `K` as a possible namespace.
              | NamespacePaths<T[K], K & string> // Recurse into `T[K]`, updating path to `K`.
          : // If `P` is not empty, continue building paths.
            | `${P}.${K & string}` // Include the concatenated path as a namespace.
              | NamespacePaths<T[K], `${P}.${K & string}`> // Recurse into `T[K]`, updating path.
        : // If `T[K]` is not an object (leaf node).
          P extends ""
          ? // If `P` is empty, include the key `K` as a namespace.
            K
          : // If `P` is not empty, include the accumulated path `P`.
            P;
    }[keyof T] // Collect all namespace paths into a union type.
  : // If `T` is not an object (shouldn't happen), return `never`.
    never;

// Type representing all possible namespaces extracted from `IntlMessages`.
// This will be a union of strings like "Schemas", "Schemas.LoginForm", etc.
type AllNamespaces = NamespacePaths<IntlMessages>;

// The main type representing the translation function.
// It constrains the namespace `N` to be one of the valid `AllNamespaces`.
export type TranslationFn<N extends AllNamespaces> = {
  (
    key: MessageKey<N>, // The key to translate, constrained to valid keys under namespace `N`.
    values?: TranslationValues, // Optional variables for interpolation in the translation string.
    formats?: Partial<Formats>, // Optional custom formats for date, time, numbers, etc.
  ): string; // Returns the translated string.

  rich(
    key: MessageKey<N>, // The key to translate.
    values?: RichTranslationValues, // Values that can include React elements for rich text.
    formats?: Partial<Formats>, // Optional custom formats.
  ): ReactNode; // Returns a ReactNode (string, element, or array of nodes).

  markup(
    key: MessageKey<N>, // The key to translate.
    values?: MarkupTranslationValues, // Values that include markup (e.g., HTML strings).
    formats?: Partial<Formats>, // Optional custom formats.
  ): string; // Returns the translated string with markup.

  raw<K extends MessageKey<N>>(
    key: K, // The key to retrieve the raw message for.
  ): MessageTypeAtPath<IntlMessages, FullKey<N, K>>; // Returns the raw message type at the full key path.
};

global.d.ts

import en from "./messages/en.json";

type Messages = typeof en;

declare global {
  // Use type safe message keys with `next-intl`
  type IntlMessages = Messages;
}

[ScreamZ]

Too complex watch my answer below

[ScreamZ]

This is not the « recommended pattern », but in my humble opinion it does exactly what we want and I love using it :

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>>>;

const yourCustomCode = (t: TFn) => {
  // Your code
}

Is the simplest way to export it.

Recommended way is here #1134 but I don't like it much

[sahandsn]

much simpler, thanks!

[sahandsn]

quick question. what about for dynamic, but fixed values? @ScreamZ

[ScreamZ]

Depends on how you proceed, but can try as const when tuning values from a map

example:

const label = {
 a: "v",
 b: "v"
} as const

t("some." + label["a"]) // will work with const

Otherwise, you need to cast your dynamic value to possible values or any if you don't care.

This happens because your dynamic value is resolved as string currently.