How To Create React Multi Language Website Using I18Next

Hello devs, 
In this multi-language website react js tutorial, I will focus on how we can create a react multi-language website. It is a common requirement for a front-end side that your website has to be multi-lingual.

So that, I am here to help you create a react multi-language website. In this multi-language translate react js app with react hook & i18next tutorial I will use react i18next package. So if you don't know to create a multi-language website, then this tutorial is for you.

So let's start our tutorial, language translator in react js.

Step 1: Create React App

First of all, we will create a simple react application using the create-react-app npm command. So run this below command.

npx create-react-app react-multi-lingual

Step 2: Install i18next

To create this react multi-language website, we need to install i18next npm package. So install it. 

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

Step 3: Create Translated File

In this step, we need to create a translation file that has to be translated. So create those files. I will create JSON file to make it.

public/assets/i18n/translations/en.json

{
    "HELLO_WORLD": "Hello World!",
    "REACT_EXAMPLE": "This is a react example",
    "THANK_YOU": "Thank you for visiting codecheef!"
}

public/assets/i18n/translations/en.json

{
    "HELLO_WORLD": "ওহে বিশ্ব",
    "REACT_EXAMPLE": "এটি একটি প্রতিক্রিয়াশীল উদাহরণ.",
    "THANK_YOU": "কোডচিফ পরিদর্শন করার জন্য আপনাকে ধন্যবাদ!"
}

Step 4: Configure  i18next

In this fourth step, we have to configure the i18next. So follow this code and update your file like that:

src/i18n/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
 
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
 
i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: 'en',
    debug: true,
    /* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }
  });
 
export default i18n;

In this step, we need to import the i18n.js in the Index.js file to initialize the i18next configuration.

src/index.js

No in this step, let’s create those components for the demonstration under src/components/ directory.

• HelloWorld.js 
• ThankYou.js 
• ReactExample.js

We will also create a LangSelector.js component to handle the language selection for the react application using the radio button.

src/components/langSelector.js

Now update all the components like below:

src/components/HelloWorld.js

 src/components/ReactExample.js

And the last one

 src/components/ThankYou.js

After doing all of the steps, you will get the following project structure.

File Structure
  react-multi-lingual
  node_modules
  public
    assets
      i18n
        translations
          en.json
          bn.json
  src
    components
       HelloWorld.js
       LangSelector.js
       ReactExample.js
       ThankYou.js
    i18n
       i18n.js
  App.js
  index.css
  index.js
  package-lock.json
  package.json

Read also: React Redux Complete Setup Example with Api Call

Now run npm start to start the server. Hope it can help you.