Next-translate: [Question] - Is there a `getFixedT`?

[Fghurayri]

Hello! 👋

I started using Next JS last week and I'm amazed about how the i18n scene is still not mature yet! So thank you so much for your efforts in such a young library. It's really appreciated!

My requirement is - I want to translate an invoice to be in Arabic and English on the same page. I achieved this by using getFixedT that is provided by the i18next framework in another project.

https://www.i18next.com/overview/api#getfixedt

I understand this framework is minimal (and growing!). Can you please confirm if such a behavior is possible with this library or if you advise any workaround.

Thanks! 🙏

[aralroca]

There is a workaround... But I'm open to proposals to achieve this in a better way...

The workaround is to use the i18nProvider and import the namespaces manually.

import React from 'react'
import I18nProvider from 'next-translate/I18nProvider'
import useTranslation from 'next-translate/useTranslation'

import common from '../../locales/en/common.json'
import example from '../../locales/en/example.json'

function EnglishContent() {
    const { t } = useTranslation()

   return t`common:example` // Example in English
}

function CurrentLanguageContent() {
    const { t } = useTranslation()

   return t`common:example` // Example in the current language by path: /ar/example
}

export default function Page(){
  return (
   <>
     <CurrentLanguageContent />
      <I18nProvider lang="en"  namespaces={{ common, example }}>
        <EnglishContent />
      </I18nProvider>
  </>
  )
}

[aralroca]

I found a better workaround, also using I18nProvider 🙂 This provider is accumulating the namespaces. So you can just rename the namespaces:

import React from 'react'
import I18nProvider from 'next-translate/I18nProvider'
import useTranslation from 'next-translate/useTranslation'

// Import English common.json
import commonEN from '../../locales/en/common.json'

function PageContent() {
  const { t, lang } = useTranslation()

  console.log(lang) // -> current language

  return (
    <div>
      <p>{t('common:example') /* Current language */}</p>
      <p>{t('commonEN:example') /* Force English */}</p>
    </div>
  )
}

export default function Page() {
  const { lang } = useTranslation()

  return (
    <I18nProvider lang={lang} namespaces={{ commonEN }}>
      <PageContent />
    </I18nProvider>
  )
}

[aralroca]

I add the documentation label to write better documentation about this.

[Fghurayri]

@aralroca Thank you so much!!! I tried both examples and they worked perfectly!! 🎉

I also fixed an issue to maintain the correct i18n regardless if I'm visiting the en version or the ar version! ✅

import commonEn from "../../../public/static/locales/en/common.json";
import commonAr from "../../../public/static/locales/ar/common.json";

function Invoice({ order }) {
  const { lang } = useTranslation();
  return (
    <I18nProvider
      lang={lang}
      namespaces={{ commonEn, commonAr }}
    >
      <InvoiceItemsEn order={order} />
      <InvoiceItemAr order={order} />
    </I18nProvider>
  );
}

function InvoiceItemsEn({ order }) {
  const { t } = useTranslation();
  const { weight } = order;

  return <div>weight {t("commonEn:UNITS.WEIGHT_UNITS.KG")}</div>;
}

function InvoiceItemsAr({ order }) {
  const { t } = useTranslation();
  const { weight } = order;

  return <div>weight {t("commonAr:UNITS.WEIGHT_UNITS.KG")}</div>;
}

Please feel free to close this issue.. 🙏