How to Localize Your React App with i18next

How to Localize Your React App with i18next

Learn to localize a React app using 18next set up language files, integrate translations, and create a multilingual user experience.

Posted by Joe Dodds on May 2, 2023

Localization is an essential aspect of developing a globally accessible application. It enables your app to support multiple languages, allowing users to interact with it in their preferred language. In this tutorial, we will explore how to localize a React app using the i18next library, a powerful and flexible solution for internationalization.


  • A basic understanding of React
  • Node.js and npm installed on your system
  • A React app to localize (you can create one using npx create-react-app my-app)

Getting Started

1. Install i18next and react-i18next

To get started, you need to install the i18next and react-i18next libraries as dependencies. Run the following command in your React app's root directory:

npm install i18next react-i18next

2. Create a translation file

Create a new folder named locales in your src directory. Inside the locales folder, create a subfolder for each language you want to support, like en for English and es for Spanish. In each language folder, create a translation.json file that contains key-value pairs for translated strings.

For example, create the following structure:

src/locales/en/translation.json src/locales/es/translation.json

Add some sample translations to each file:


{ "welcome": "Welcome to our app!", "language": "Language" }


{ "welcome": "¡Bienvenido a nuestra aplicación!", "language": "Idioma" }

3. Configure i18next

Create a new file named i18n.js in the src directory and configure i18next as follows:

import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from "./locales/en/translation.json"; import es from "./locales/es/translation.json"; i18n .use(initReactI18next) .init({ resources: { en: { translation: en }, es: { translation: es }, }, lng: "en", fallbackLng: "en", interpolation: { escapeValue: false, }, }); export default i18n;

This configuration initializes i18next with the translation files we created earlier and sets the default language to English.

4. Import i18n.js

Import the i18n.js file in your src/index.js to enable i18next in your app:

import './i18n';

5. Use the useTranslation hook

In your components, use the useTranslation hook from react-i18next to access translated strings:

import React from 'react'; import { useTranslation } from 'react-i18next'; const App = () => { const { t, i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div> <h1>{t('welcome')}</h1> <button onClick={() => changeLanguage('en')}>{t('language')} - English</button> <button onClick={() => changeLanguage('es')}>{t('language')} - Español</button> </div> ); }; export default App;

Now your app should display the translated strings based on the selected language.


In this tutorial, we've walked you through the process of localizing a React app using the i18next library. By following these steps, you can easily create a multilingual application that caters to a global audience.

Remember to keep your translation files up-to-date as your app grows and evolves, ensuring that all new features and components are localized for each supported language.

Happy coding!

Sign up for our newsletter

Recent articles