Can I fallback translations if message is missing for a language?

[LarsFlieger]

I have a en.json with:

{
  "name": "Lars",
  "age": 35
}

and a de.json with this:

{
  "name": "Leon"
}

Age is missing in de.json so I get:

IntlError: MISSING_MESSAGE: Could not resolve `age` in messages for locale `de`.

How can I make that it fallbacks to en (my default language). Is this possible?

[amannn]

Sure, please see here: https://next-intl-docs.vercel.app/docs/usage/configuration#messages-fallback

[ptjaworski]

Sure, please see here: https://next-intl-docs.vercel.app/docs/usage/configuration#messages-fallback

Hello @amannn, first of all, thank you for this library – it's very useful. This merging solution doesn’t seem to be the most straightforward when using 10+ languages in a large project scale. Is there an alternative way to do this? Thanks in advance

[ptjaworski]

I implemented that feature by using the custom hook, maybe it will be useful for someone too

import { useTranslations as useIntlTranslations } from "next-intl";
import defaultMessages from "@/i18n/locales/en.json";

function getNestedValue(obj, path) {
  return path.split(".").reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
}

export function useTranslations() {
  const t = useIntlTranslations();
  return (namespace) => {
    const translated = t(namespace);
    return translated !== namespace ? translated : getNestedValue(defaultMessages, namespace) || namespace;
  };
}

Hoever, it doesn't solve the MISSING_MESSAGE error message. Is there any solution for that? To show it only when corresponding key doesn't exist on defaultLocale. Or, just to avoid showing it, as a temporary solution.

[victorymakes]

Same issue here — using deepmerge feels a bit heavy for this case.

[loking]

Instead of manually deep-merging in getRequestConfig, use next-intl-localechain:

import { withLocaleChain } from 'next-intl-localechain';

export default withLocaleChain({
  chains: {
    'pt-BR': ['pt-BR', 'pt', 'en'],
    'zh-Hant': ['zh-Hant', 'zh-Hans', 'zh', 'en'],
  },
  loadMessages: async (locale) => (await import(`../messages/${locale}.json`)).default,
});

Loads all locales in the chain and deep-merges them. No more MISSING_MESSAGE errors.

Install: npm install next-intl-localechain