Next.jsのnext-translateでi18nの多言語対応

前置き

入社3ヶ月目の駆け出しフロントエンドエンジニアによる備忘録です。
Next.js プロジェクトで実装する i18n の多言語対応についての記事となります。

個人の学習ログも兼ねていますので余計な補足がいっぱいあります。予めご了承下さい。

◎ 今回やってみたいこと

今回は、Next.js アプリケーション内で多言語対応機能を提供するための拡張ライブラリ next-translate を導入して Next.js プロジェクトの多言語対応 を実現してみたいと思います。

next-translate ライブラリの主な機能

next-translate ライブラリが提供する主な機能は以下のとおりです。

• 多言語翻訳ファイルの管理
• コンポーネントごとに、翻訳後の文字列を取得する useTranslation フック
• 言語切り替えリンクの作成
• ユーザーの言語設定に基づいた自動リダイレクト
• サーバーサイドレンダリング(SSR)時の言語検出とローカリゼーション

実装に必要な準備

next-translate ライブラリの実装には、next.config.mjs ファイルの設定と、
ライブラリ機能をビルド時に統合するための Next.js プラグイン next-translate-plugin のインストールが必要です。

---

【補足】 ルーティング設定どうするか

Next.jsでは、多言語対応のサイトを作成する際に、主に2つのルーティング方法があります。

1. ドメインごとのルーティング (Domain Routing)：
   ドメインごとに言語を切り替える方法です。
   例えば、example.jp では日本語を表示し、
   example.com では英語を表示します。
2. サブパスごとのルーティング (Sub-path Routing)：
   ドメインではなく、パスで言語を切り替える方法です。
   例えば、 example.com/ja では日本語を表示し、
   example.com/en では英語を表示します。

今回は2つ目の サブパスごとのルーティング を採用します。

next-translate 使用時の注意点

next-exportで静的ファイルを出力する場合は使えません。
今回紹介しているのはPageRouterでのやり方です。AppRouterでは何故かdefaultlocaleで設定した言語以外は404ページに飛ばされてしまいました。

◎ 使用技術と環境

項目	選択した技術	バージョン
OS	MacOS	Sonoma 14.4
フレームワーク	Next.js	14.1.3
言語	TypeScript	^5
ライブラリ	next-translate	2.6.2
プラグイン	next-translate-plugin	2.6.2

◎ さっそくやってみよう

ライブラリのインストール

まずターミナルで多言語対応させたいプロジェクトのディレクトリまで移動し、そこで next-translate ライブラリをインストールします。

cd your-next-app
npm install next-translate

うまくインストールできていれば package.json の "dependencies" フィールドに "next-translate": "^2.6.2" などの記載が自動で追加されます。

---

プラグインのインストール

続いて、next-translate-plugin をインストールします。

npm install --save-dev next-translate-plugin

先程のライブラリと同様に、うまくインストールができていれば package.json の "devDependencies" フィールドに "next-translate-plugin": "^2.6.2" のような表記が自動で追加されています。

【補足】 --save-dev オプションとは

--save-dev は npm のインストールコマンドで使われるオプションで、開発時にのみ使用するパッケージをインストールする際に使用します。つまり、このコマンドによってインストールされたパッケージは本番環境では不要なパッケージとみなされます。

そして、--save-dev でインストールしたパッケージは、package.json ファイル内の "devDependencies" フィールドに記録されます。

今回のように、インストール時に開発用とプロダクション用のパッケージを明確に分けることで、本番環境では不要なパッケージを使わずに済むため、アプリケーションのサイズを小さく抑えることができます。

---

next.confing.mjs の設定

next.config.json で next-translate-plugin をインポートし、Next.js プロジェクトを多言語対応化するための設定を行っていきます。

next.config.mjs

+ import nextTranslate from 'next-translate-plugin';
/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
};
- export default nextConfig;
+ export default nextTranslate(nextConfig); // Next.jsの設定オブジェクトに、多言語対応の設定を組み込む役割

---

i18n.jsonの作成と設定

next.config.json の設定が完了したら、次はルートディレクトリに i18n.json ファイルを新規作成します。中身は以下の通りです。

i18n.json

+ {
+   "locales": ["en", "ja"],
+   "defaultlocale": "ja",
+   "pages": {
+     "*": ["common"],
+     "/": ["top"]
+   }
+ }

各種設定の意味

• "locales"：
  アプリケーションでサポートする言語を配列で指定します。
  今回は英語（en）と日本語（ja）をサポートすると宣言しました。
• "defaultlocale"：
  アプリケーションのデフォルトの言語を指定します。
• "pages"：
  どのページに対して、どの翻訳ファイル ( JSONファイル ) を適用するかを指定しています。
  "*" はすべてのページを表しており、"/" は example.com/ja などにトップページに飛べるルートパス、 "/about" は例えば example.com/ja/about などアバウトページに飛べる about パスを意味しています。
  今回の設定はすべてのページに対して common.json 、ルートページに対して top.json という名の翻訳ファイルを適用するという意味になります。
  また、複数の翻訳ファイルを指定することも可能です。
  例えば "pages": { "*": ["common", "header", "footer"] } とすれば、common.json、header.json、footer.json の3つの翻訳ファイルがすべてのページに適用されます。

---

翻訳ファイルを作成

ルートディレクトリに以下の翻訳ファイルを順番に追加して下さい。
ファイルパスは ./locales/言語/翻訳ファイル となるようにフォルダを作成して下さい。

./locales/ja/common.json

+ {
+   "TITLE": "日本語"
+ }

./locales/en/common.json

+ {
+   "TITLE": "English"
+ }

./locales/ja/top.json

+ {
+   "TITLE": "トップページ"
+   "HEADING": "こんにちは、世界！"
+ }

./locales/en/top.json

+ {
+   "TITLE": "TOP-Page"
+   "HEADING": "Hello World!"
+ }

上記の通りにファイルを作成すれば、ディレクトリ構造は以下のようになります。

./locales/
    ├── en/
    │   ├── common.json
    │   └── top.json
    └── ja/
        ├── common.json
        └── top.json

【補足】 ディレクトリ構成をツリーで表示したいときの裏技

興味がある & macOSユーザーの方だけどうぞ

まずターミナルで Homebrew の tree パッケージをインストールします。

brew install tree

そして対象のディレクトリに移動して以下のコマンドを実行して下さい。

tree

これでターミナル上に、今回翻訳ファイルの作成の項目で紹介したようなツリー形式のディレクトリ構成が表示されます。知っておくと技術ブログを書いたりするときにめちゃくちゃ便利です。

---

各種ページへの翻訳ファイルの読み込み

それでは、ページに先程作成した翻訳ファイルの情報を読み込んでいきます。

./src/pages/_app.tsxやindex.tsx

 import Head from 'next/head';
+  import useTranslation from 'next-translate/useTranslation';

次に言語を切り替えたい箇所に t 関数を使って翻訳ファイルの情報を埋め込んでいきます。

./src/pages/_app.tsx

 export default function App({ Component, pageProps, router }: AppProps) {
+    const { t } = useTranslation('common');
   return (
     <>
       <Head>
+          <title>{t('TITLE')}</title>
       </Head>
       <Component key={router.asPath} {...pageProps} />
     </>
   );
 }

これでタブに 日本語 または English と表示されます。

./src/pages/index.tsx

 export default function Top() {
+    const { t } = useTranslation('top');
   return (
     <>
        <main>
+          <h2>{t('HEADING')}</h2>
        </main>
     </>
   );
 }

これでトップページに こんにちは、世界！ または Hello World! と表示されます。

【補足1】 t 関数の書き方について

• {t('TITLE')}
./locales/ja/common.json または ./locales/en/common.json から "TITLE" の情報を取得して表示しています。 common.json は const { t } = useTranslation('common'); でデフォルトのアクセス先として設定しているのでこのようなシンプルな書き方ができます。

【補足2】 複数ファイルから翻訳データを取得したい場合

• パターン１：t関数で読み込んだのとは別の翻訳ファイルからデータを取得
  const { t } = useTranslation('top'); → {t('common:TITLE')}

./src/pages/index.tsx

 export default function Top() {
+  const { t } = useTranslation("top");
   return (
     <>
        <Head>
+          <title>{`${t('TITLE')}｜${t('common:TITLE')}`}</title>
        </Head>
        <main>
+          <h2>{t('HEADING')}</h2>
        </main>
     </>
   );
 }

• パターン２：複数のファイルを読み込んで異なる変数名を当てる

./src/pages/index.tsx

 export default function Top() {
+  const { t: tCommon } = useTranslation("common");
+  const { t } = useTranslation("top");
   return (
     <>
        <Head>
+          <title>{`${t('TITLE')}｜${tCommon('TITLE')}`}</title>
        </Head>
        <main>
+          <h2>{t('HEADING')}</h2>
        </main>
     </>
   );
 }

これでタブには トップページ｜日本語 または Top-Page｜English 、ページ内には こんにちは、世界！ または Hello World! と表示されます。

---

localhost:3000 で動作確認

無事翻訳ファイルの情報をインポートできたら、ローカルホストでサブパスごとに言語の表示を切り替えができているかどうかを確認します。

npm run dev

開発用サーバーを立ち上げたら、http://localhost:3000/ にアクセスします。

そこで http://localhost:3000/ または http://localhost:3000/ja にて、タブが 日本語 となっており、画面に こんにちは、世界！ と表示されていることを確認して下さい。

同様に http://localhost:3000/en にて、タブが English となっており、画面に Hello World! と表示されていることを確認して下さい。

以上で簡単にではありますが、Next.js プロジェクトの i18n 多言語対応 を実現できました。

最後に

公式ドキュメントを見てみると、どうやら引数で変数を渡して翻訳ファイルの情報をページ側で操作することも可能なようです。また、const { t, lang } = useTranslation('common') とすれば、lang にて現在表示されている言語の情報を取得することもできるみたいですね。

これからも少しずつ next-translate の機能について勉強していき、ある程度知見がまとまったタイミングで改めて記事にしたいと思います。

参考

Next.jsプラグイン next-translate のドキュメント
https://github.com/aralroca/next-translate

Next.jsで多言語対応のサイトを作るのが簡単すぎた件
https://zenn.dev/steelydylan/articles/nextjs-with-i18n

next-i18nextの多言語化の設定と日本語をルートにするまで
https://qiita.com/akifumii/items/4f92d5fdff75471eda68

【SSG】Next.jsで多言語対応のサイトを作るのが簡単ではなかった件
https://qiita.com/ItsukiN32/items/19ab0bc94c591c5a157a

【Next.js + TypeScript】多言語対応(i18n)のやり方
https://btj0.com/blog/react/nextjs-i18n/