Usage outside a next.js app (in shared/ui)

[TheMikeyRoss]

I have a monorepo like this:

• backends
• frontends
  • admin-portal (next.js app)
  • client-portal (next.js app)
• shared
  • ui (react components only)
  • translations (JSONS)

In my next.js apps I have configured i18n to get the translations from shared/translations and that works perfectly.

But the components shared/ui are using the useTranslation hook from next-translate but for some reason when I use those components in any of my next.js app then the translations from the shared/ui don't work.

I'm think that's because the shared/ui is not really a next.js app. But how can I make the translations work while inside shared/ui workspace?

I don't want to abstract the texts from the shared/ui and just pass it as props because that will be a lot of props.

I'd love if I could make the translations as part of the shared/ui so that I only have to pass the important props
i.e.:

<CommonHeader
     backRoute={'/home"}
     onSaveButtonClick={...}
/>

and this way I don't have to worry about the translation of the words "back" and the word "save" because it's already happening inside CommonHeader component in shared/ui workspace.

The CommonHeader is just a minimal example. There are other shared ui components I have that contain 10+ translations within it

[aralroca]

You can load translations from where you want using loadLocaleFrom

{
  // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    // You can use a dynamic import, fetch, whatever. You should
    // return a Promise with the JSON file.
    import(`./myTranslationsFiles/${lang}/${ns}.json`).then((m) => m.default),
}

[TheMikeyRoss]

Do I create a i18n.js file inside the shared/ui directory? (not a next.js app but just a collection of React components)

[aralroca]

I recommend moving only the translations in shared/translations, then the i18n.js is per project, you can load in the config directly from shared/ui:

{
  // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    import(`shared/translations/locales/${lang}/${ns}.json`).then((m) => m.default),
}

If you have problems with monorepo, take a look to this: https://github.com/aralroca/next-translate?tab=readme-ov-file#13-how-to-use-next-translate-in-a-mono-repo

[TheMikeyRoss]

Oh so you mean I merge shared/translations with shared/ui ?

[aralroca]

no sorry, I wanted to say shared/translations

[TheMikeyRoss]

in each of my next.js apps I'm already importing locales from the shared/translations like

{
  // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    import(`shared/translations/locales/${lang}/${ns}.json`).then((m) => m.default),
}

And everything is working fine.

But the components that are imported from shared/ui don't bring their translations with them.

For example in shared/ui/src/CommonHeader.tsx im using the useTranslation in there to set some texts.

But when I import that CommonHeader in any of my next.js apps the back button says "common:back" instead of actually translating to "Back"

[TheMikeyRoss]

I made this quick test component in shared/ui/src/TranslatedComponent.tsx

import React from "react";

import useTranslation from "next-translate/useTranslation";

import { Button } from "@sikka/hawa/button";

export const TranslatedComponent = () => {
  const { t } = useTranslation("common");
  return (
    <div>
      <Button>{t("common:back")}</Button>
      <Button>{t("common:home")}</Button>
      <Button>{t("common:save")}</Button>
    </div>
  );
};

And when I bundle shared/ui with tsup and then use that component in a next.js app (apps/admin-portal) it looks like this:

[TheMikeyRoss]

I tried using getT but that didn't work since it's a returning a promise

[TheMikeyRoss]

I just tried using the Trans component but that didn't work either:

      <Button>
        <Trans i18nKey="common:back" />
      </Button>

The result is similar to the screenshot above where the button text is "common:back" instead of "Back"

[zaaakher]

You can pass the t as prop to your shared/ui components

export const TranslatedComponent = ({ t }) => {
  return (
    <div>
      <Button>{t("common:back")}</Button>
      <Button>{t("common:home")}</Button>
      <Button>{t("common:save")}</Button>
    </div>
  );
};

And in your next.js app:

export const SomePage = () => {
  const { t } = useTranslation('common')
  return (
      <TranslatedComponent t={t}/>
  )
}