[Nextjs] Using i18next to make it multilingual.

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.

公式サイト

Introduction | react-i18next documentation

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.

公式サイト

Trans Component | react-i18next documentation

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.