i18next dealing with multiple translation files nested namespaces

Question

I'm having issues figuring out how to lazy load my translations with i18next.

Here's my setup:

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: NODE_ENV === 'development',
    defaultNS: 'translation',
    fallbackLng: false,
    fallbackNS: 'translation',
    keySeparator: false,
    lng: 'en',
    load: 'currentOnly',
    nsSeparator: '.'
  });

I have a folder structure like this:

├── src
│   └── pages
│       ├── customer
│       │   └── home.tsx
│       └── manager
│           └── dashboard.tsx

I keep my translations in /public/locales/en/translation.json and this works fine. However, my app is expanding and I don't want to keep all my translations for a language in single file. E.g. the customer doesn't need to download all the translations for things happening on the manager portal.

My goal is to download translations specifically for the manager's Dashboard.

I've tried creating a file and adding it to this location

/public/locales/en/manager/dashboard

And then in my React component I make use of the following hook:

...
  // This probably needs to change
  const { t } = useTranslation('manager.dashboard');

  return <div>{t('Hello World')}</div>

And just to test it out my /public/locales/en/manager/dashboard.json (I really want to maintain this file structure) file has a single key value in it:

{ "Hello World": "Goodbye World" }

It's not working (works if I add this key to the /public/locales/en/translation.json file)

How can I change my configuration to get this organized nest translation file structure to work.

adrai · Accepted Answer · 2022-01-19T10:59:23.717

3

If you're using useTranslation like that:

const { t } = useTranslation('manager.dashboard');

Your filename should be like this /public/locales/en/manager.dashboard.json

btw. when lazy loading make sure you use Suspense or check for the ready flag: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

You may also check out this page, regarding multiple translation files: https://react.i18next.com/guides/multiple-translation-files

edit: Alternatively, you can try with this:

const { t } = useTranslation('manager/dashboard');

like here: https://codesandbox.io/s/react-i18next-http-example-forked-2ptmu?file=/src/app.js:153-162

edited Jan 19 '22 at 10:59

answered Jan 19 '22 at 10:33

adrai

2,495
1
15
18

So there's no way for me to use the file structure like this? `/public/locales/en/manager/dashboard.json` – Barry Michael Doyle Jan 19 '22 at 10:36
Because I really want to main that folder structure and would only change that as a last resort. – Barry Michael Doyle Jan 19 '22 at 10:39
Did you try with const { t } = useTranslation('manager/dashboard'); ? – adrai Jan 19 '22 at 10:46
Yeah, didn't work. – Barry Michael Doyle Jan 19 '22 at 10:47
Are you sure? For me it works. Can you provide a reproducible example? maybe on codesandbox or similar? – adrai Jan 19 '22 at 10:50
Do you have a codesandbox example of it working? – Barry Michael Doyle Jan 19 '22 at 10:51
What is your `init` configuration on your working version? Anything different to what I provided? – Barry Michael Doyle Jan 19 '22 at 10:52
here we go: https://codesandbox.io/s/react-i18next-http-example-forked-2ptmu?file=/src/app.js:153-162 – adrai Jan 19 '22 at 10:59
Thanks, looks like my problem was I didn't have `interpolation: { escapeValue: false }`, after adding that it started working! – Barry Michael Doyle Jan 19 '22 at 11:07
Oh wow, thanks for this. I was pulling my hair out – Alexandre Moreira May 23 '22 at 13:20
Does anyone have a working example for `next-i18next`? I have been trying to make it work, even using `interpolation: { escapeValue: false }`, in `next-i18next.config.js`, but it doesn't seem to load it. – Sagar Gulati Jul 16 '22 at 14:10
https://github.com/i18next/next-i18next/tree/master/examples – adrai Jul 16 '22 at 15:42
https://github.com/i18next/next-i18next#client-side-loading-of-translations-via-http – adrai Jul 16 '22 at 15:43

score 1 · Answer 2 · answered May 22 '23 at 14:25

As an option to an @adrai answer, if you don't want to disable escapeValue options in the i18n configuration, you can use double backslash in the hook:

const { t } = useTranslation('common\\header');

My folder structure is:

├── public
│   └── assets
│       └── locales
│           ├── common
│           |   └── header
│           │       ├── en.json
|           |       └── ua.json
│           └─ login
│              ├── en.json
|              └── ua.json

And in config I have this setting:

backend: {
  loadPath: '/assets/locales/{{ns}}/{{lng}}.json'
},

i18next dealing with multiple translation files nested namespaces

2 Answers2