Client side translations - where should I put LanguageDetector?

[UROjQ6r80p]

On some pages I wan't to use client side only translations so according to: https://github.com/i18next/i18next-http-backend/tree/master/example/next I set up HttpBackend etc.

I want to add custom language detector on client side, here is my code:

const HttpBackend = require('i18next-http-backend/cjs')
const ChainedBackend= require('i18next-chained-backend').default
const LanguageDetector = require('i18next-browser-languagedetector/cjs')
const dev = process.env.NODE_ENV === 'development';

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'de', 'es-419', 'es'],
        localeDetection: false,
    },
    reloadOnPrerender: dev,
    serializeConfig: false,
    use: typeof window !== 'undefined' ? [ChainedBackend] : [],
    backend: {
        backendOptions: [{ expirationTime: 60 * 60 * 1000 }, { /* loadPath: 'https:// somewhere else' */ }], // 1 hour
        backends: typeof window !== 'undefined' ? [HttpBackend]: [],
    },
}

If I add LanguageDetector before ChainedBackend it doesn't work.

[adrai]

The language detection is usually done by Next.js so you don't need it

[UROjQ6r80p]

I'm using @formatjs/intl-localematcher to detect language. I couldn't find a clean way to modify next.js locale directly etc. I might start using app router instead of pages it seems to fit my use case better.