How to use both remote JSON files and local JSON files in React use i18next

When implementing internationalization with i18next in a React project, we sometimes need to load translation resources from both local and remote sources. This scenario may arise when dynamically fetching certain text, such as user-generated content or text from backend services. Below, I will provide a detailed explanation of how to combine the use of remote JSON files and local JSON files for internationalization in a React application.

Step 1: Install the necessary libraries

First, install i18next and react-i18next, which are the core libraries for implementing internationalization. If you haven't installed them yet, you can install them using the following command:

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

Here, i18next-http-backend is installed for loading remote resources, and i18next-browser-languagedetector is used for automatically detecting the user's language preference.

Step 2: Configure i18next

Next, you need to configure i18next in your React project. Typically, this configuration is done in a separate file, such as i18n.js. Here is an example configuration that supports loading resources from both local and remote sources:

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpBackend) // Use HttpBackend to load remote resources
  .use(LanguageDetector) // Automatically detect language
  .use(initReactI18next) // Bind React and i18next via react-i18next
  .init({
    fallbackLng: 'en',
    debug: true,
    backend: {
      loadPath: (lngs, namespaces) => {
        return lngs[0] === 'en' ? '/locales/{{lng}}/{{ns}}.json' : `https://myapi.example.com/locales/{{lng}}/{{ns}}.json`;
      }
    },
    detection: {
      order: ['queryString', 'cookie', 'localStorage', 'sessionStorage', 'navigator'],
      caches: ['localStorage', 'cookie']
    },
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

In this configuration, loadPath is a function that dynamically returns the resource loading path based on the current language. For example, if the current language is English (en), it loads from the local path; otherwise, it fetches resources from the API.

Step 3: Use i18next in your React components

After configuring i18next, you can use it in your React components. Here is a simple example:

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

function App() {
  const { t } = useTranslation();

  return <div>{t('key')}</div>;
}

export default App;

In this component, we use the useTranslation() hook to get the translation function t, and then use it to fetch the translation text for the key key.

Summary

Through the above steps, you can flexibly load internationalization resources from both local and remote sources in a React project. This approach is particularly suitable for applications that need to handle dynamic or multi-source content. Careful configuration and proper use of i18next and react-i18next can enable your application to support multiple languages and improve user experience.