Optional translations

[amannn]

Is your feature request related to a problem? Please describe.

It would be good if some translations could be marked as optional, so no error is reported.

Describe the solution you'd like

Either an API to ask if a translation is available to conditionally render it, or an API to suppress the error in this case.

Probably t.has(…) would be the best option here as it can be used to check for translations before using either t, t.rich, t.raw etc.

Describe alternatives you've considered

Adding empty strings in the messages if the label is not relevant for a particular scenario (i.e. "message": "").

If you're using the VSCode integration for next-intl via i18n Ally, you can add empty messages for new keys via "i18n-ally.keepFulfilled": true.

I'm currently unsure if next-intl needs built-in support for this, or if it can be solved with tooling. I guess the question is: "Is this translation missing currently or is it not intended at all?".

This could also be solved via a combination of useMessages and lodash/get, e.g. in a custom hook.

[Crayon-ShinChan]

Can we have these two features:

1. If the translation does not exist, fallback to see the defaultLocale json file and use the word there
2. Fallback to a specific language not always defaultLocale, If the translation from zh-TW does not exist, fallback to show words in zh

[Crayon-ShinChan]

Can we have these two features:

1. If the translation does not exist, fallback to see the defaultLocale json file and use the word there
2. Fallback to a specific language not always defaultLocale, If the translation from zh-TW does not exist, fallback to show words in zh

I use this code to implement the logic:

import merge from "deepmerge";
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => {
  const localeMessages = (await import(`./messages/${locale}.json`)).default;
  const localeGeneralMessages =
    locale.split("-").length > 1
      ? (await import(`./messages/${locale.split("-")[0]}.json`)).default
      : {};
  const defaultMessages = (await import(`./messages/en.json`)).default;
  const messages = merge.all([
    defaultMessages,
    localeGeneralMessages,
    localeMessages,
  ]);

  return {
    messages,
  };
});

It can run successfully, but give me the type warning for async ({ locale })

Argument of type '({ locale }: GetRequestConfigParams) => Promise<{ messages: object; }>' is not assignable to parameter of type '(params: GetRequestConfigParams) => RequestConfig | Promise<RequestConfig>'.
  Type 'Promise<{ messages: object; }>' is not assignable to type 'RequestConfig | Promise<RequestConfig>'.
    Type 'Promise<{ messages: object; }>' is not assignable to type 'Promise<RequestConfig>'.
      Type '{ messages: object; }' is not assignable to type 'RequestConfig'.
        Types of property 'messages' are incompatible.
          Type 'object' is not assignable to type 'AbstractIntlMessages'.
            Index signature for type 'string' is missing in type '{}'.ts(2345)

anyone know how to solve this?

[amannn]

Merging messages from another locale as a fallback is absolutely fine and also mentioned in the messages docs ("How can I use messages from another locale as fallbacks?").

[alejandroTecDam]

Can we have these two features:

1. If the translation does not exist, fallback to see the defaultLocale json file and use the word there
2. Fallback to a specific language not always defaultLocale, If the translation from zh-TW does not exist, fallback to show words in zh

I use this code to implement the logic:

import merge from "deepmerge";
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => {
  const localeMessages = (await import(`./messages/${locale}.json`)).default;
  const localeGeneralMessages =
    locale.split("-").length > 1
      ? (await import(`./messages/${locale.split("-")[0]}.json`)).default
      : {};
  const defaultMessages = (await import(`./messages/en.json`)).default;
  const messages = merge.all([
    defaultMessages,
    localeGeneralMessages,
    localeMessages,
  ]);

  return {
    messages,
  };
});

It can run successfully, but give me the type warning for async ({ locale })

Argument of type '({ locale }: GetRequestConfigParams) => Promise<{ messages: object; }>' is not assignable to parameter of type '(params: GetRequestConfigParams) => RequestConfig | Promise<RequestConfig>'.
  Type 'Promise<{ messages: object; }>' is not assignable to type 'RequestConfig | Promise<RequestConfig>'.
    Type 'Promise<{ messages: object; }>' is not assignable to type 'Promise<RequestConfig>'.
      Type '{ messages: object; }' is not assignable to type 'RequestConfig'.
        Types of property 'messages' are incompatible.
          Type 'object' is not assignable to type 'AbstractIntlMessages'.
            Index signature for type 'string' is missing in type '{}'.ts(2345)

anyone know how to solve this?

I've solved the issue like this, but I only have two elements, maybe you can do two steps

const messages = merge(defaultMessages, localeMessages);

[philipbjorge]

My usecase:

Our backend is returning a State (e.g. Washington, Oregon, etc.)
We will have translations for all of the common states.

However, it is possible that a new value comes down the line.
I would like to be able to show a translated key if its present, otherwise just fall back to displaying the value returned by the API.

---

As far as I can tell, this isn't supported by this library?

[amannn]

@philipbjorge Have you considered using select for this use case?

"state": "{state, select, WA {Washington} OR {Oregon} other {{state}}"

[philipbjorge]

Mmm interesting solution... We have 900 selections, so I feel like that string might become unwieldy. I think we might go with something like this since the key name is well-defined.

  const getTranslationWithFallback = (key: string, fallback: string) => {
    const translated = tc(key, false);
    if (translated.startsWith("common.")) {
      return fallback;
    }
    return translated;
  };

{getTranslationWithFallback(`biomes.${biome}`, biome)}