Adding Fallback Namespace Support to useTranslations API

[ms-rushi]

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

I have a use case in my project where I need to retrieve a message from a specific namespace. However, if the message is not found in that namespace, I want it to fallback to another namespace.

For example, consider the following message file -

// en.json

{
  "page_one": {
    "title": "page one custom title"
  },
  "default": {
    "title": "default title",
    "description": "default description"
  }
}

Now I want to use messages in such a way that if is message is present in "page_one" then it should read it from "page_one" otherwise it should return the value from "default". I am expecting output as below -

const t = useTranslations("page_one");
t("title") // output: page one custom title
t("description") // output: default description

Describe the solution you'd like

I would appreciate it if useTranslations could support a fallback namespace as shown below:

const t = useTranslations("page_one", "default");
t("title"); // Output: page one custom title
t("description"); // Output: default description

Describe alternatives you've considered

Currently, I’ve implemented a similar mechanism using a custom hook:

import { useTranslations } from "next-intl";

export const useCustomTranslations = (namespace = "", defaultNamespace = "default") => {
  const translator = useTranslations(namespace);
  const defaultTranslator = useTranslations(defaultNamespace);

  function customTranslator(key, obj = {}) {
    if (
      namespace === defaultNamespace ||
      translator.raw(key) !== `${namespace}.${key}`
    ) {
      // If namespace is equal to default or key exists in namespace
      return translator(key, obj);
    } else if (defaultTranslator.raw(key) !== `${defaultNamespace}.${key}`) {
      // If key does not exist in namespace but exists in default
      return defaultTranslator(key, obj);
    } else {
      // If key does not exist in either namespace
      return translator(key, obj);
    }
  }

  customTranslator.__proto__.rich = (key, obj) => {
    if (
      namespace === defaultNamespace ||
      translator.raw(key) !== `${namespace}.${key}`
    ) {
      return translator.rich(key, obj);
    } else if (defaultTranslator.raw(key) !== `${defaultNamespace}.${key}`) {
      return defaultTranslator.rich(key, obj);
    } else {
      return translator.rich(key, obj);
    }
  };

  customTranslator.__proto__.raw = (key) => {
    if (
      namespace === defaultNamespace ||
      translator.raw(key) !== `${namespace}.${key}`
    ) {
      return translator.raw(key);
    } else if (defaultTranslator.raw(key) !== `${defaultNamespace}.${key}`) {
      return defaultTranslator.raw(key);
    } else {
      return translator.raw(key);
    }
  };

  return customTranslator;
};

However, since I am using Next.js v14 with server-side rendering, I am unable to modify the error-handling mechanism ( onError prop of NextIntlClientProvider ) of next-intl due to the known issue [ Globally register error handling #1285 ] . As a result, whenever I invoke translator.raw, I get numerous error messages in the console.

I would really appreciate it if this issue could be addressed soon to avoid the unnecessary console logs. Thank you!

[amannn]

You can use t.has to check whether the message is available before returning a default.