How to support zh-tw, zh-cn, pt-br

[TannerS]

We have this set up in our backend

i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
backend: {
loadPath: /public/locales/{{lng}}/{{ns}}.json,
},
load: 'languageOnly',
ns: ['support'],
defaultNS: 'support',
fallbackLng: 'en',
});

Now we have our local folders set up as

_

public/locales/zn-tw/translations.json
public/locales/pt-br/translations.json
public/locales/zn-cn/translations.json

_

but the browser gives me this error on debug

i18next::backendConnector: loading namespace footer for language zh failed failed parsing /public/locales/zh/translations.json to json

So it wont look for the zh-tw folder but instead only does the zh folder. Same result happens with pt-br, it looks for the folder pt.

After that error it shows (but still doesnt translate sincefile cant be parse since it cant be found)

i18next: languageChanged zh-tw

Is there anyway to fix this?

[jamuhl]

1. Country part in locale needs to be uppercase: zh-tw ---> zh-TW
2. load: 'languageOnly' -> enforces only loading zh (not zh-TW)

https://www.i18next.com/principles/fallback#language-fallback

[TannerS]

This worked, thanks!

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏

[jamuhl]

@jinongun try and you will see - nothing todo with it

[kyun]

@jamuhl

My Goal

Route /en and /tw(Taiwan region zh-TW).

My Codes

strings.json
public/static/locales/en/strings.json
public/static/locales/zh-TW/strings.json

i18n.ts

import NextI18Next from 'next-i18next';

export const DEFAULT_LOCALE = 'en';

// NOTE: Keep `en` the first element of this list
export const AVAILABLE_LOCALE_LIST = ['en', 'zh-TW'];

const nextI18NextInstance = new NextI18Next({
  defaultLanguage: DEFAULT_LOCALE,
  defaultNS: 'strings',
  otherLanguages: AVAILABLE_LOCALE_LIST,
  localeSubpaths: {
    ...AVAILABLE_LOCALE_LIST.reduce<{ [key: string]: string }>((acc, curr) => {
      acc[curr] = curr;
      return acc;
    }, {}),
    'zh-TW': 'tw'
  }, // ex. { ar: 'ar', ... }
  localeStructure: '{lng}/{ns}',
  contextSeparator: '/',
  pluralSeparator: '.',
  nonExplicitSupportedLngs: true,
  keySeparator: false,
  load: 'currentOnly',
  fallbackLng: {
    'default': ['en']
  },
  interpolation: { prefix: '{', suffix: '}' },
  debug: false,
  detection: {
    lookupCookie: 'locale',
    lookupQuerystring: 'locale',
    order: ['querystring', 'cookie', 'header'],
    caches: ['cookie'],
    cookieOptions: { path: '/', secure: true },
  },
});

export const { appWithTranslation, withTranslation, i18n, Link, useTranslation, Router } = nextI18NextInstance;

export default nextI18NextInstance;

The above code doesn't work.

so, I've found 2 solutions.

First solution

Add zh to AVAILABLE_LOCALE_LIST like this

export const AVAILABLE_LOCALE_LIST = ['en', 'zh-TW', 'zh'];

BUT, I don't have zh/strings.json. So, I am not sure it is fine.

Second solution

Toggle nonExplicitSupportedLngs to false.

It looks okay for me.

but if I can solve this problem without nonExplicitSupportedLngs:false, I want to do that.

Could you give me some advice?

[jamuhl]

Looks more related to next-i18next ---> ask over at the https://github.com/isaachinman/next-i18next repo

[kyun]

@jamuhl Thanks a lot. By the way, which one looks a better solution you think?

[jamuhl]

what you mean...next-i18next uses react-i18next under the hood...makes using it simpler with next.js

[kyun]

@jamuhl I mean between 2 solutions which I've found.

[jamuhl]

nonExplicitSupportedLngs:false should be ok as long your list is complete ;)

[kyun]

@jamuhl Do you mind giving some examples for me about the nonExplicitSupportedLngs use-case?
When am I should use nonExplicitSupportedLngs: true?
I read a comment about nonExplicitSupportedLngs but I don't understand yet.

[jamuhl]

It's rather simple...as saying in the docs: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources

supportedLngs: array of allowed languages
nonExplicitSupportedLngs: if true will pass eg. en-US if finding en in supportedLngs

=> every specific locale (lng-(script)-Region) will pass if supportedLngs has the unspecific locale lng (without region) ---> so having en in supportedLngs and nonExplicitSupportedLngs: true en-US, en-GB, en-AU, .... will pass too

[kyun]

@jamuhl
Is nonExplicitSupportedLngs only effective with load: languageOnly?

I have zh/strings.json and the browser's language is set zh-HK.

I expected to route /zh with load:currentOnly. but it routed to /en (default)
Only load:languageOnly routes to /zh.
(nonExplicitSupportedLngs: true is same.)

[jamuhl]

no...

again:

supportedLngs: array of allowed languages
nonExplicitSupportedLngs: if true will pass eg. en-US if finding en in supportedLngs

nonExplicitSupportedLngs -> changes which languages pass the isSupportedLng check
load -> sets which files of the resolve hierarchy gets loaded

https://www.i18next.com/principles/translation-resolution#languages

[kyun]

@jamuhl
In advance, I'm so sorry about this stupid question and I really appreciate your answer.

I made a table for my situation.

My browser is Google Chrome and the language zh-TW, zh-HK, zh, en in order.

Each result means routed subpath.

		zh/strings.json	zh-TW/strings.json	both/strings.json
nonExplicitSupportedLngs: true	languageOnly	/zh	/en	/zh
nonExplicitSupportedLngs: true	currentOnly	/en	/en	/zh-TW
nonExplicitSupportedLngs: false	languageOnly	/zh	/en	/zh
nonExplicitSupportedLngs: false	currentOnly	/zh	/zh-TW	/zh-TW

In the zh/strings.json column, I expected /zh in every boxes, but nonExplicitSupportedLngs: true & currentOnly returns /en instead of /zh.

It makes me confused.

Am I misunderstanding now?

[jamuhl]

sorry I don't understand your table...resolving locales has nothing todo with JSON files.

Just check -> i18next.languages...this is the array of locales used in priority to lookup translations.

load: currentOnly -> uses what is detected no fallback to the language part, eg. zh-TW -> zh-TW, en
load: languageOnly -> use only the language, eg. zh-TW -> zh, en
load: all -> zh-TW -> zh-TW, zh, en

how subpath works, idk. you will have to ask at the next-i18next repo