Multi-language Websites, How to + Best Practices

Building apps that cater to a diverse audience is crucial in today's global world. Multi-language support can make your app accessible to users who speak different languages, and i18next is a powerful library that simplifies this process. In this post, we'll walk you through setting up internationalization (i18n) in your React app using i18next and react-i18next.

🤔 Why Use `i18next`?

i18next is a popular and highly flexible library for adding internationalization to JavaScript apps. It provides seamless integration with React using react-i18next and has various features, including language detection, dynamic content translation, and support for locale-specific formats.

🛠️ Step-by-Step Guide to Setting Up Multi-Language Support

1. 📦 Install the Required Packages

First, let's install i18next, react-i18next, and i18next-browser-languagedetector:

1npm install i18next react-i18next i18next-browser-languagedetector
2

i18next: The core library for handling translations.
react-i18next: A plugin that integrates i18next with React.
i18next-browser-languagedetector: A plugin that detects the user's language from their browser settings.

2. 📁 Set Up Your Translation Files

Create a locales folder in your project and add JSON files for each language. For example:

locales/en.json:

1{
2  "welcome_message": "Welcome to our app!",
3  "logout": "Log out"
4}
5

locales/ar.json:

1{
2  "welcome_message": "مرحبًا بك في تطبيقنا!",
3  "logout": "تسجيل خروج"
4}
5

locales/so.json:

1{
2  "welcome_message": "Ku soo dhawoow barnaamijkeena!",
3  "logout": "Ka bax"
4}
5

3. ⚙️ Configure `i18next` in Your App

Create an i18n.js file to initialize i18next:

1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import LanguageDetector from 'i18next-browser-languagedetector';
4import en from './locales/en.json';
5import ar from './locales/ar.json';
6import so from './locales/so.json';
7
8i18n
9  .use(LanguageDetector) // Detects user language from the browser
10  .use(initReactI18next) // Connects with React
11  .init({
12    resources: {
13      en: { translation: en },
14      ar: { translation: ar },
15      so: { translation: so },
16    },
17    fallbackLng: 'en', // Fallback language if detection fails
18    interpolation: {
19      escapeValue: false, // Not needed for React (XSS prevention)
20    },
21  });
22
23export default i18n;
24

👉 Make sure to import this i18n.js file in your index.js or App.js to initialize it when your app loads.

4. ✍️ Use Translations in Your Components

Now, let's see how to use the translations in your React components:

1import React from 'react';
2import { useTranslation } from 'react-i18next';
3
4const MyComponent = () => {
5  const { t } = useTranslation(); // The translation function
6
7  return (
8    <div>
9      <h1>{t('welcome_message')}</h1> {/* Translates 'welcome_message' */}
10      <button>{t('logout')}</button> {/* Translates 'logout' */}
11    </div>
12  );
13};
14
15export default MyComponent;
16

5. 🌐 Add a Language Switcher

To allow users to switch languages, create a simple language switcher component:

1import React from 'react';
2import { useTranslation } from 'react-i18next';
3
4const LanguageSwitcher = () => {
5  const { i18n } = useTranslation();
6
7  const changeLanguage = (lng) => {
8    i18n.changeLanguage(lng);
9  };
10
11  return (
12    <div>
13      <button onClick={() => changeLanguage('en')}>English</button>
14      <button onClick={() => changeLanguage('ar')}>Arabic</button>
15      <button onClick={() => changeLanguage('so')}>Somali</button>
16    </div>
17  );
18};
19
20export default LanguageSwitcher;
21

🔍 Language Detection and Fallback

The i18next-browser-languagedetector plugin will automatically detect the user's language based on browser settings. If the language cannot be detected, it will default to the fallback language, which we've set to English (fallbackLng: 'en').

🎉 Conclusion

With i18next and react-i18next, you can easily add multi-language support to your React app, making it more accessible to a global audience. This setup allows for seamless language detection and switching, ensuring a great user experience across different languages.