Setting Up and Using i18n in React.js

In this section, I’m gonna use the i18next and react-i18next libraries for managing translation in next.js app. Let's begin by installing the required packages.

Install Dependencies

Install i18next and react-i18next through npm in your project directory by run the following command:

shell
npm install i18next react-i18next

Create Translation Files

For this example, we'll create translation files for English, Khmer and Chinese. By creating a locales folder in public. This folder will contain the translation files for each language.

plaintext
public/
  └── locales/
      ├── en/
      │   └── global.json
      ├── km/
      │   └── global.json
      └── cn/
          └── global.json

Write file content with your translations.

json
{
  "welcome": "Welcome",
  "description": "This is an internationalized app."
}

json
{
  "welcome": "ស្វាគមន៍័",
  "description": "នេះជាឧទាហរណ៍នៃកម្មវិធីរបស់ពួកយើង."
}

json
{
  "welcome": "欢迎",
  "description": "这是一个国际化的应用程序。"
}

Initialize i18n

Create a file named i18n.js in your src directory (or wherever appropriate in your project structure) and add the following code:

jsx
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// Import language files
import translationEN from '../public/locales/en/global.json';
import translationKM from '../public/locales/km/global.json';
import translationCN from '../public/locales/cn/global.json';
const resources = {
  en: {
    translation: translationEN
  },
  km: {
    translation: translationKM
  },
  cn: {
    translation: translationCN
  }
};
i18n
  .use(initReactI18next) // Passes i18n down to react-i18next
  .init({
    resources,
    lng: 'en', // Default language
    fallbackLng: 'en', // Fallback language if translation file for the current language is not available
    interpolation: {
      escapeValue: false // React already does escaping
    },
    react: {
      useSuspense: false // Set to true if you're using React 16.6+
    }
  });
export default i18n;

Integrate i18n with Your App

Import the i18n.js file in your index.js and use I18nextProvider to wrap your App component:

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'; // Import i18n configuration
ReactDOM.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
export default MyApp;

Using Translations in Your Components

To use the translations, import the useTranslation hook from react-i18next in your components.

jsx
import React from 'react';
import { useTranslation } from 'react-i18next';
const HomePage = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
};
export default HomePage;

Switching Languages

You can add a language switcher in your application by:

jsx
import React from 'react';
import { useTranslation } from 'react-i18next';
const LanguageSwitcher = () => {
  const { i18n } = useTranslation();
  const changeLanguage = (locale) => {
    i18n.changeLanguage(locale);
  };
  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('km')}>Khmer</button>
      <button onClick={() => changeLanguage('cn')}>Chinese</button>
      <button onClick={() => changeLanguage('th')}>Thai</button>
      <button onClick={() => changeLanguage('lo')}>Lao</button>
    </div>
  );
};
export default LanguageSwitcher;

Add this component to your main layout or navigation bar.