Internationalization (i18n) is the process of preparing a React application to support multiple languages and regions using tools like react-i18next.
Internationalization ensures your app works globally with consistent UX and accessibility.
# Install i18n dependencies
npm install i18next react-i18next
// i18n configuration file
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
i18n.use(initReactI18next).init({
resources:{
en:{translation:{welcome:"Welcome to React",message:"This app supports multiple languages."}},
hi:{translation:{welcome:"React में आपका स्वागत है",message:"यह ऐप कई भाषाओं का समर्थन करता है।"}}
},
lng:"en",
fallbackLng:"en",
interpolation:{escapeValue:false}
});
export default i18n;
// React component with language switch
const { t, i18n } = useTranslation();
i18n.changeLanguage("hi");
Switch the language below to see how content updates dynamically without reloading the page.
This app supports multiple languages.
// Recommended folder layout
src/
├── i18n.js
├── App.js
└── locales/
// English translations
{
"welcome":"Welcome to React",
"message":"This app supports multiple languages."
}