📖

Next.jsでreact-i18nextを使って、翻訳機能を実装

に公開
Next.js
React
tech

Next.jsでreact-i18nextを使って、翻訳機能を実装する方法について紹介します。

導入

今回はreact-i18nextという多言語翻訳が可能なライブラリを利用します。

公式サイト
https://react.i18next.com/

yarn add react-i18next i18next

上記のコマンドで導入します。

初期設定

まず、i18nの初期化ファイルを src/libs/i18n/i18n.ts に作成します。

src/lib/i18n/i18n.ts

import i18n from "i18next"
import { initReactI18next } from "react-i18next"
import enJson from ".././../../locales/en.json"
import jaJson from ".././../../locales/ja.json"

const resources = {
	ja: { translation: jaJson },
	en: { translation: enJson },
}

i18n.use(initReactI18next).init({
	lng: "ja", // 使用する言語
	fallbackLng: "ja", // 言語での翻訳が利用できない場合に使用する言語。
	resources, // 使用する言語ファイル
	interpolation: {
		// react already safes from xss
		escapeValue: false, // XSSインジェクションを回避するために渡された値をエスケープする
	},
})

export default i18n
export type ErrorType = keyof typeof jaJson.error | keyof typeof enJson.error

翻訳ファイルの作成

次に翻訳ファイルを設定します。
今回は、英語と日本語の2つの言語を翻訳することを想定します。

locales/en.json

{
	"ja": "JA",
	"en": "EN",
	"user": { "name": "Name" },
	"selfIntroduction": "my name is {{name}}",
	"error": {
		"unspecific": "Something went wrong.",
		"404": "The page was not found."
	}
}

locales/ja.json

{
	"ja": "日本語",
	"en": "英語",
	"user": { "name": "名前" },
	"selfIntroduction": "私の名前は{{name}}です。",
	"error": {
		"unspecific": "問題が発生しました。",
		"404": "ページが見つかりませんでした。"
	}
}

グローバルで初期化を行う

次にlayout.tsxに呼び出します。
layout.tsx などのルートに仕込むことで、全ページでi18nを利用可能にします。

"use client"
import "../src/libs/i18n/i18n"

const RootLayout = ({ children }) => {
	return (
        {children}
	)
}

export default RootLayout

翻訳を利用

そして、最後に翻訳部分を作成します。
今回はテストとして、/language で、英語と日本語の切り替えを実装します。

app/language

"use client"
import { useTranslation } from "react-i18next"

export default function Page() {
	const { t, i18n } = useTranslation()
	const errorCode404 = "404"

	const onChangeLanguage = (lng: string) => {
		i18n.changeLanguage(lng)
	}

	return (
		<>
			{/* 言語切り替えのボタン */}
			<div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
				<button
					style={{
						width: "70px",
						background: i18n.language === "ja" ? "#87cefa" : "#fff",
						border: "1px solid #ccc",
						cursor: "pointer",
					}}
					type="button"
					onClick={() => onChangeLanguage("ja")}
				>
					{t("ja")}
				</button>
				<button
					style={{
						width: "70px",
						background: i18n.language === "en" ? "#87cefa" : "#fff",
						border: "1px solid #ccc",
						cursor: "pointer",
					}}
					type="button"
					onClick={() => onChangeLanguage("en")}
				>
					{t("en")}
				</button>
			</div>

			<div>{t("user.name")}</div>
			<div>{t("selfIntroduction", { name: "田中 太郎" })}</div>
			<div>{t("selfIntroduction", { name: "鈴木 一郎" })}</div>
			{/* error.404 */}
			<div>{t([`error.${errorCode404}`, "error.unspecific"])}</div>
		</>
	)
}

これを画面で確認しましょう。

言語を切り替えることで、各文言がリアルタイムで更新されることが確認できます。

今回は、readct-i18nを紹介しましたが、
next-i18nextというライブラリもあるようなので、
Next.jsを利用している方はこちらの方も良いと思います。
https://github.com/i18next/next-i18next

Discussion