Javascript Programming Tutorials, Guides & Best Practices

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: { en: { translation: en }, fr: { translation: fr } },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Sample en.json:

React example:

const today = new Intl.DateTimeFormat(i18n.language).format(new Date());

In this tutorial, you'll learn how to implement i18n in a scalable way using i18next, the most popular library for internationalizing React apps.

If you don’t have a project yet, initialize a new one:

Then start the host app (React):

cd app-shell
npx webpack serve

By selecting only the necessary state slices, you can optimize component rendering and improve performance.

While Redux remains a powerful tool for state management, there are scenarios where Zustand might be a better fit: