I do not understand how to reuse messages

[OguzcanKarakoc]

I think this is a very common way of structuring a localization file (en.json).

{
   "common": {
       "close": "Close",
       "save": "Save"
   },
   "dashboard": {
       "title": "This is the title of the page"
   }
}

In such a case, how would I be able to get the common inside my dashboard/page.tsx?

Example 1:

export default function DashboardPage() {
  const t = useTranslations("dashboard");
  const test = t('title')

  // ???
  const example = t('common.close')
  return <>....</>
}

another way I tried, which somewhat works is the following, however my editor does not like this (vscode with i18n ally).

Example 2:

export default function DashboardPage() {
  const t = useTranslations("dashboard");
  const tCommon = useTranslations('common');

  const test = t('title');
  const test2 = tCommon('save');
}

Let me start off with sharing what the documentation says:

As your app grows, you'll want to reuse messages among your components. If you use component names as namespaces to structure your messages, you'll automatically benefit from reusable messages by reusing your components.

Examples:

You're displaying products in your app and often need to resolve a category identifier to a human readable label (e.g. new → "Just in"). To ensure consistency, you can add a ProductCategory component that turns the category into a styled badge.
You commonly need a dialog that displays a "confirm" and "cancel" button. In this case, consider adding a ConfirmDialog component to reuse the messages along with the functionality.

There might be cases where you want to use the same message in different components, but there's no reasonable opportunity for sharing the message via a component. This might be symptom that these components should use separate messages, even if they happen to be the same for the time being. By using separate labels, you gain the flexibility to use more specific labels (e.g. "not now" instead of "cancel").

For edge cases where the reuse of messages among different components is hard to achieve with shared components, you can either use messages from different namespaces via useTranslations(), or you can consider adding a hook that shares the translation behavior:

useLocaleLabel.tsx

export default function useLocaleLabel() {
  const t = useTranslations('useLocaleLabel');
 
  function getLocaleLabel(locale: 'en' | 'de') {
    return t('label', {locale});
  }
 
  return getLocaleLabel;
}

{
  "useLocaleLabel": {
    "label": "{locale, select, en {English} de {German} other {Unknown}}"
  }
}

I don't see the need for a SaveButton component just to translate the word "Save." Following this approach would mean creating numerous components just for translating common words. For instance, if I want to use the "Save" translation for a link, would I need to create yet another component just for that?

The most relevant information here seems to be that I can use translations from different namespaces via useTranslations. However, when I do this, I seem to lose type safety.

Is this something with i18n Ally?

Inside my settings.json I have added the following:

  "i18n-ally.regex.usageMatch": [
    "[^\\w\\d](?:t|tCommon)\\(['\"`]({key})['\"`]"
  ],

but now in the example 2 above, when I translate t('title') it gets added under the 'common' key. So:

{
   "common": {
       "close": "Close",
       "save": "Save",
       "title": "......"
   },
   "dashboard": {
       "title": "This is the title of the page"
   }
}

How would I solve his? Others must have had similar problems, how did you solve it? I have also opened a discussion on the i18n Ally github page: lokalise/i18n-ally#1196

[amannn]

Maybe this section from the structuring messages docs is helpful to you:

To retrieve all available messages in a component, you can omit the namespace path:

const t = useTranslations();
t('About.title');

You can use that to access all translations, from any namespace.