ni18n with LanguageDetector

[koryonik]

Hi, thanks for this lib!

I’m trying to use ni18n according to the example customer-language-selection and using the LanguageDetector plugin (https://github.com/i18next/i18next-browser-languageDetector/).

Everything seems to work expect the langue detection, fallback lang is always used and stored instead the expected fr (browser lang is fr_FR) :

//ni18n.config.ts

import type { Ni18nOptions } from 'ni18n'
import LanguageDetector from 'i18next-browser-languagedetector'

export const ni18nConfig: Ni18nOptions = {
  fallbackLng: 'en',
  supportedLngs:['en', 'fr'],
  use: [LanguageDetector], //load plugin here
  ns: ['translation'],
  react: {
    useSuspense: false,
  },
}

//_app.ts

function App({ Component, pageProps }: Props) {
  //...
  const locale = typeof window !== 'undefined' 
	&& window.localStorage.getItem('i18nextLng') //same key used by the plugin
  useSyncLanguage(locale)
  //...
}

If I register the plugin and init i18n before, it’s seems to work:

//ni18n.config.ts

import i18n from 'i18next'
import type { Ni18nOptions } from 'ni18n'
import LanguageDetector from 'i18next-browser-languagedetector'

const languageDetector = new LanguageDetector(null,{})
i18n.use(languageDetector).init() //register and init

export const ni18nConfig: Ni18nOptions = {
  fallbackLng: 'en',
  //...
  //don't load plugin here
}

What I’am wrong or what’s the best way to handle this?