"I want to make React multilingual, but it seems difficult to set up."
Many people wonder, "How do I switch translations?"
actually,Using the i18next library, you can easily add translation functionality to your React apps.can.
In this article,From installation methods to screen switching, creating translation files, and initial settingsWe will explain everything in detail.
Full explanation with codeSo even beginners can take their first steps towards creating a multilingual app right away.
Why multilingual support is necessary
Why is translation functionality needed for React apps now?
Conclusion: To accommodate global needs and improve usability.
The demand for multilingual support is growing rapidly in the following areas:
- Development of services for overseas users
- Tourism, education, and e-commerce sectors with inbound demand
- In-house and business systems for employees and customers from overseas
- Blogs and portfolios that are useful for non-Japanese speakers
For example, the Japan Tourism Agency announced that it will develop websites and apps for foreign visitors to Japan.Highly recommended as "removing language barriers"I am
(Reference: https://www.mlit.go.jp/kankocho/shisaku/kankochi/kankochi_torikumi.html).
In React,Using the library makes it easy to add translation functionalitySo it’s well worth learning about it now.
What is i18next?
Features and benefits of i18next
Conclusion: i18next is a library dedicated to making translation support easier.
i18next has the following features:
- Translation fileCan be managed in JSON format
- Dynamic language switching
- Component-specificLazy loading is also supported
- Supports multiple languages simultaneously
It is an extension for React only.react-i18nextIf you useTranslation functions (t functions) can be used directly in componentsIt will be.
The installation command is as follows:
1 | npm install i18next react-i18next i18next-browser-languagedetector |
Preparing and Configuring Translation Files
Translation data folder design and contents
Conclusion: Separate folders by language and manage them in key-value format.
Configure the folder as follows:
1 | src/ ├── locales/ │ ├── en/ │ │ └── translation.json │ └── ja/ │ └── translation.json |
for exampleen/translation.jsonwill look like this:
1 | { "greeting": "Hello", "description": "This is a multilingual app." } |
ja/translation.jsonwould look like this:
1 | { "greeting": "Hello", "description": "This is a multilingual app." } |
Initial setup and usage of i18next
Initialization Code and React Integration
Conclusion: Set up i18next and provide translation capabilities throughout your app.
i18n.jsPrepare a file and write it as follows:
1 | import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import en from './locales/en/translation.json'; import ja from './locales/ja/translation.json'; i18n .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: { translation: en }, ja: { translation: ja }, }, fallbackLng: 'ja', interpolation: { escapeValue: false }, }); export default i18n; |
Load the i18n file at the top level of your app.
1 | import './i18n'; function App() { return ; } |
Translation switching in components
Using t function and useTranslation
Conclusion: You can call translations in the useTranslation hook and switch dynamically.
1 2 3 4 5 6 7 8 9 | import { useTranslation } from 'react-i18next'; function Home() { const { t, i18n } = useTranslation(); const changeLang = (lng) => { i18n.changeLanguage(lng); }; return ( <div> <h1>{t('greeting')}</h1> <p>{t('description')}</p> <button onclick="{()" > English</button> <button onclick="{()" > changeLang('ja')}>Japanese</button> </div> );} |
With just this,A React app that can switch languages in real timeis completed.
More practical improvements
Advanced multilingual techniques
For more practical use, you can use the following additional settings:
- Include the language code in the URL (e.g. /en/home)
- Date, time and currency display by language (Intl API)
- Split translations into multiple files
- Lazy loading of translation files
Completed code summary
i18n.js
(The initialization code mentioned above)
App.js
1 | import React from 'react'; import './i18n'; import Home from './Home'; function App() { return ; } export default App; |
Home.js
(The translation switching code mentioned above)
summary
In this article, we will use React and i18nextHow to easily create a multilingual appWe introduced the following.
Key Takeaways:
- If you use i18nextAnyone can easily add translation functionality
- To manage with JSON,Easy to update and manage
t functionanduseTranslationinIntuitive switching
To make it available to users around the world,Take this opportunity to learn multilingual skillsPlease give it a try.
Related links:
English 
Japanese