How to setup LanguageDetector with next-i18next

[aegiz]

Hi, I am trying to use LanguageDetector with next-i18next but I am getting the following error:

"Error: You are passing a wrong module! Please check the object you are passing to i18next.use()"

As seen in the README there is a special configuration to have for this plugin to be serializable . So, I followed these steps and here are what my different files looks like:

// next-i18next.config.js
const LanguageDetector = require('i18next-browser-languagedetector');
module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'jp'],
    },
    serializeConfig: false, // needed for LanguageDetector plugin to work
    use: [LanguageDetector],
};

// next-config.js
const { i18n } = require('./next-i18next.config');
const moduleExports = {
    distDir: 'build',
    i18n,
    ...
 }

// _app.tsx
import nextI18NextConfig from '../next-i18next.config.js';
import { appWithTranslation } from 'next-i18next';
export default appWithTranslation(App, nextI18NextConfig);

// pages/index.tsx
import nextI18NextConfig from '../next-i18next.config.js';
export const getStaticProps: GetStaticProps = async ({ locale }) => {
    if (!locale) {
        return {
            props: {},
        };
    }
    return {
        props: await serverSideTranslations(locale, ['common'], nextI18NextConfig),
    };
};

Reading the i18next-browser-languageDetector doc it seems like I need to call the init function.
But where?

[isaachinman]

You do not need i18next-browser-languagedetector within a next-i18next project. NextJs itself handles all language detection.

[aegiz]

Duh! Makes sense. Thanks for your quick reply