How to translate your React app into multiple languages

Introduction

Implementing multilingual support in your React application can be complex. However, using the i18next framework alongside the new i18nowAI service simplifies the process. This guide will walk you through the steps to efficiently set up your app for multiple languages.

1. Install i18next

Begin by installing i18next along with its necessary extensions. Execute the following command in your terminal:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

2. Create a new folder

Create a folder named locales in your project's public directory to store your translation JSON files.

3. Create source translation file

Inside the locales folder, add a subfolder named en for English translations. Within this folder, create a file named translation.json. Example content:

{
  "hello": "Hello, world!",
  "welcome": "Welcome to our application!"
}

4. Initialize i18next

Set up i18next in your React app by creating a file named i18n.js in the root of your project. Include the following initialization code:

  import i18n from "i18next";
  import { initReactI18next } from "react-i18next";
  import Backend from "i18next-http-backend";
  import LanguageDetector from "i18next-browser-languagedetector";

  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      fallbackLng: "en",
      load: "languageOnly",
      react: {
        useSuspense: false,
      },
      interpolation: {
        escapeValue: false,
      },
      detection: {
        order: ["querystring", "localStorage", "navigator", "cookie"],
        caches: ["localStorage", "cookie"],
        lookupQuerystring: "lng",
        lookupLocalStorage: "i18nextLng",
      },
      backend: {
        loadPath: "/locales/{{lng}}/{{ns}}.json",
      },
    });

  export default i18n;

5. Use i18next in your components

To use the translations, integrate i18next within your React components as shown below:

  import { useTranslation } from "react-i18next";
  import "@/i18n";

  export default function Home() {
    const { t } = useTranslation();

    return (
      <div>
        <h1>{t("hello")}</h1>
        <p>{t("welcome")}</p>
      </div>
    );
  }

6. Use i18nowAI to translate to other languages

To further translate your app into additional languages, employ i18nowAI. Simply upload your source translation file, select your target languages, and let i18nowAI handle the translation. Begin at www.i18now.ai.

Conclusion

You have now equipped your React app with i18next and i18nowAI, enabling easy and efficient language localization. This setup not only improves accessibility but also expands your app's global reach. To view example code and learn more, visit our GitHub repository.