Do other languages on the same page, such as Japanese pages, English pages and other language pages in Next.js.
Internationalisation (i18next) is supported by default in Next.js.
If you specify a default locale, it will automatically do the routing for you.
In this case, I wanted to embed a component in a string (e.g. to make the middle of a character bold, or to make it a link), so I decided to introduce react-i18next in the library.
This article describes how to use react-i18next.
install react-i18next
react-i18next can be installed using npm.
$ npm install react-i18next i18next --save
For yarn, add with yarn add.
$ yarn add react-i18next i18next
Implemented in react-i18next.
Create multilingual files (.json)
This time, prepare Japanese (ja.json) and English (en.json).
{
"header": {
"mypage": "マイページ"
},
}
{
"header": {
"mypage": "MyPage"
},
}
The directory should be
|-- project
|-- src
|-- |-- data
|-- |-- |-- text
|-- |-- |-- |-- ja
|-- |-- |-- |-- |-- ja.json
|-- |-- |-- |-- en
|-- |-- |-- |-- |-- en.json
|-- |-- i18n.ts
...
Implemented in react-i18next
Check the official website for initial settings.
https://react.i18next.com/guides/quick-start#configure-i18next
The i18n.ts file is created.
Load Japanese and English translation files as resources.
import translationJa from "./data/text/ja/ja.json";
import translationEn from "./data/text/en/en.json";
const resources = {
ja: {
translation: translationJa,
},
en: {
translation: translationEn,
},
};
It is available by init with imported i18n.
i18n
.use(initReactI18next)
.init({
resources,
fallbackLng: "ja",
lng: "ja",
interpolation: {
escapeValue: false,
},
});
source
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationJa from "./data/text/ja/ja.json";
import translationEn from "./data/text/en/en.json";
const resources = {
ja: {
translation: translationJa,
},
en: {
translation: translationEn,
},
};
i18n
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
resources,
fallbackLng: "ja",
lng: "ja",
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
});
export default i18n;
provider
Import i18n.ts and enclose the components to be used in I18nextProvider.
This allows multiple i18next instances to be supported and a default namespace to be defined.
import i18n from "@/i18n";
import { I18nextProvider } from "react-i18next";
// ...略
<I18nextProvider i18n={i18n} defaultNS={"translation"}>
<Component {...pageProps} />
</I18nextProvider>
Translating using react-i18next in components.
You can use useTranslation to obtain a t-function and an i18n instance.
You can obtain a translation by passing the object name defined in the translation file to the t function.
import { useTranslation } from "react-i18next";
export function MyComponent() {
const { t, i18n } = useTranslation("translation", { lng: locale });
return <div>{t("header.mypage")}</div>
}
Replacing part of a string in a translation file with a component AND inserting a string
There can be rather a lot of requirements to make a part of a translation file, such as bold text or a link.
This can be achieved with the component.
Add text to the translation file.
{
"header": {
"mypage": "マイページ"
},
"news": {
"title": "<bold>{{name}}</bold>です。"
},
}
Replace by component. Replacing strings.
import {Trans} from "react-i18next";
export function MyComponent() {
const { t, i18n } = useTranslation("translation", { lng: locale });
return (
<Trans
t={t}
i18nKey={'news.title'}
values={{ name: 'world'}}
components={{ bold: <strong /> }}
></Trans>
)
}
Summary
Multilingualisation can be easily achieved by using react-i18next.
Basically, you just add the definitions to each translation file, which also makes it easier to manage in terms of source.