Alright, let's get started by either creating a new WeWeb project or opening an existing one. This will be our starting point for adding multi-language support.

Next, create a folder called locales in the root directory of your project. Inside this locales folder, you'll need to create separate JSON files for each language you want to support. For example, en.json for English and fr.json for French.

Here's what en.json might look like:

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

And for fr.json:

{
  "greeting": "Bonjour",
  "farewell": "Au revoir"
}

If you haven't already installed i18next, you'll need to add it to your project. Just run this command using npm:

npm install i18next react-i18next

Now, let's configure i18next in your main project file, like index.js or App.js. This will load the language files we just created.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: en
      },
      fr: {
        translation: fr
      }
    },
    lng: 'en', // default language
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

Let's add a language switcher component to your app so users can easily switch between languages.

Here's an example:

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

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
    </div>
  );
};

export default LanguageSwitcher;

In your React components, use the useTranslation hook to access translation keys and display the translated text.

For example:

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

const ExampleComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('farewell')}</p>
    </div>
  );
};

export default ExampleComponent;

Run your project and make sure the language switcher works correctly. Check that the translated texts are displayed properly based on the selected language.

Keep your locales JSON files up to date. Add translations for new texts or update existing ones as needed. Consistency is key across all language files.