i18n Next React.

Configuration

In the folder i18n exist an index file with the configuration as follow:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import resources from './resources.json';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: 'es',

    keySeparator: false, // we do not use keys in form messages.welcome

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

export default i18n;

Additionally, the configuration of labels and texts is on resources.json.

Usage

In the _app.js file imports i18n as follow: import 'i18n';

In the file you want to use it:

import { useTranslation } from 'react-i18next';
...

const { t } = useTranslation();
return <ComingSoonTitle>{t('<the label configured on resources.json file>')}</ComingSoonTitle>;