Problems setting up react-i18next with NextJs 13 for component localization

Question

I'm digging into NextJS 13 and I need to understand a simple use case for i18next:

My goal is only to translate components, both server and client side, as simple as:

import { withTranslation } from 'react-i18next';

const MyComponent  = () => {
  return <p>{t('msg')}</p>
}


export default MyComponent;

I'm using the new app routing mechanism and I need to have the following directory structure:

app
 |------ about
 |------ home
components
 |------- MyComponent
locale
 |------- en
 |        |---- MyComponent.json
 |------- de
 |        |---- MyComponent.json
    

Basically I want to keep dictionary files in the locale folder and I don't want to use the app->[lang]->page schema.

Is it possible to be done using NextJS 13? Using NextJs 13, am I tied to the app->[lang]->page structure?

Well, to move on and learn by doing, I've installed react-i18next together with i18next and tried to setup a simple project:

My i18n.js config:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    translation: {
      "msg": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "msg": "Bienvenue à React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

  export default i18n;

When running I got the following error:

./src/app/i18n.js
ReactServerComponentsError:

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,-[/Users/mnd/dev/node_modules/react-i18next/dist/es/context.js:1:1]
 1 | import { createContext } from 'react';
   :          ^^^^^^^^^^^^^
 2 | import { getDefaults, setDefaults } from './defaults.js';
 3 | import { getI18n, setI18n } from './i18nInstance.js';
 4 | import { initReactI18next } from './initReactI18next.js';
   `----

The error was caused by importing 'react-i18next/dist/es/index.js' in './src/app/i18n.js'.

Maybe one of these should be marked as a client entry with "use client":
  ./src/app/i18n.js
  ./src/app/page.tsx

I'm completely lost on where to go from this error... not sure, but it seens that NextJs 13 does not support context because of the server components. If not, how can I use react-i18next on the way I need to?

Answer 1

You have to change in your i18n.js config import

import { initReactI18next } from "react-i18next";

to

import { initReactI18next } from "react-i18next/initReactI18next";