[React x i18next] A complete guide to creating multilingual apps that anyone can make | Easily implement translation functions!

programming

"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(&#039;greeting&#039;)}</h1>
      <p>{t(&#039;description&#039;)}</p>
      <button onclick="{()" > English</button>
      <button onclick="{()" > changeLang(&#039;ja&#039;)}&gt;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:

Copied title and URL