Next.js の App Router を使用しているアプリケーションに国際化を実装する方法
国際化（i18n）により、React アプリケーションのアクセシビリティを高め、新しい市場へ展開しましょう。
世界がますますグローバル化するにつれて、異なる国や文化のユーザーに対応できるアプリケーションを構築することは、ウェブ開発者にとってますます重要になっています。これを実現する主要な方法の一つが国際化（i18n）であり、アプリケーションを異なる言語、通貨、日付形式に適応させることができます。
この記事では、サーバーサイドレンダリングを用いて、React Next.js アプリケーションに国際化を導入する方法を解説します。 TL;DR: 完全な例はここでご覧ください。
このガイドは Next.js の App Router を使用しているアプリケーション向けです。
Pages Router を使用している場合は、こちらのガイドを参照してください。
ステップ1： i18n ライブラリをインストールする
Next.js アプリケーションに国際化（i18n）を導入するには、まず i18n ライブラリを選びます。人気のあるライブラリはいくつかあり、next-intl などがあります。とはいえ、本例では TacoTranslate を使用します。
TacoTranslate は最先端の AI を使って文字列をあらゆる言語に自動翻訳し、JSON ファイルの面倒な管理から解放します。
ターミナルで npm を使ってインストールしましょう：
npm install tacotranslateステップ2： 無料のTacoTranslateアカウントを作成する
モジュールをインストールしたら、TacoTranslateのアカウント、翻訳プロジェクト、および関連するAPIキーを作成しましょう。こちらでアカウントを作成できます。 無料で、クレジットカードの登録は不要です。
TacoTranslateのアプリケーションUI内でプロジェクトを作成し、APIキーのタブに移動します。 readキーを1つ、そして read/writeキーを1つ作成してください。これらは環境変数として保存します。readキーはいわゆるpublicで、read/writeキーはsecretです。例えば、プロジェクトのルートにある.envファイルに追加することができます。
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010クライアント側の本番環境に秘密の read/write API キーを決して漏らさないでください。
さらに2つの環境変数を追加します: TACOTRANSLATE_DEFAULT_LOCALE と TACOTRANSLATE_ORIGIN.
TACOTRANSLATE_DEFAULT_LOCALE: デフォルトのフォールバックロケールコード。ここでは例として英語のためにenに設定します。TACOTRANSLATE_ORIGIN: 文字列が保存される「フォルダ」（例: サイトのURL）。オリジンについて詳しくはこちら。
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.comステップ 3: TacoTranslate の設定
TacoTranslate をアプリケーションに統合するには、先ほどの API キーを使ってクライアントを作成する必要があります。たとえば /tacotranslate-client.js という名前のファイルを作成します。
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY,
projectLocale:
process.env.TACOTRANSLATE_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;まもなく TACOTRANSLATE_API_KEY と TACOTRANSLATE_PROJECT_LOCALE を自動的に定義します。
クライアントを別ファイルに作成しておくと、後で簡単に再利用できます。 getLocales は、いくつかの組み込みのエラーハンドリングを持つ単なるユーティリティ関数です。次に、ファイル /app/[locale]/tacotranslate.tsx を作成し、そこで TacoTranslate プロバイダーを実装します。
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}これはクライアントコンポーネントであることを示す 'use client'; に注意してください。
コンテキストプロバイダーが準備できたら、アプリケーションのルートレイアウトである /app/[locale]/layout.tsx という名前のファイルを作成してください。 このパスは Dynamic Routes を利用するフォルダを含んでおり、 [locale] が動的パラメータです。
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}ここでまず注意すべき点は、対象の言語の翻訳を取得するために Dynamic Route パラメーター [locale] を使用していることです。さらに、generateStaticParams は、プロジェクトで有効にしているすべてのロケールコードが事前レンダリングされるようにしています。
さあ、最初のページを作りましょう！ /app/[locale]/page.tsx という名前のファイルを作成してください。
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}Next.js に 60 秒後にページを再ビルドさせ、翻訳を最新の状態に保つよう指示する revalidate 変数に注目してください。
ステップ4： サーバーサイドレンダリングの実装
TacoTranslateはサーバーサイドレンダリングをサポートしています。これにより、未翻訳のコンテンツが一瞬表示されるのではなく、翻訳済みのコンテンツを即座に表示できるため、ユーザー体験が大幅に向上します。さらに、ユーザーが閲覧しているページに必要な翻訳が既に揃っているため、クライアント側でのネットワークリクエストを省略できます。
サーバーサイドレンダリングを設定するには、/next.config.js を作成するか、または変更してください:
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};設定に合わせて isProduction のチェックを変更してください。 true の場合、TacoTranslate はパブリック API キーを公開します。ローカル、テスト、またはステージング環境にいる場合（isProduction is false)、新しい文字列が翻訳に送信されるように、シークレットの read/write API キーを使用します。
ルーティングとリダイレクトが期待どおりに動作するようにするために、ファイル /middleware.ts を作成する必要があります。Middleware を使用して、ユーザーを希望する言語で表示されるページにリダイレクトできます。
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}必ず Next.js の Middleware ドキュメント に従って matcher を設定してください。
クライアント側では、locale クッキーを変更してユーザーの優先言語を切り替えることができます。方法については、完全なサンプルコードをご覧ください！
ステップ5：デプロイしてテスト！
これで完了です！ Reactアプリケーションは、Translateコンポーネントに文字列を追加すると、自動的に翻訳されるようになります。APIキーにread/write権限が設定された環境のみが、新しい翻訳用の文字列を作成できる点にご注意ください。そのようなAPIキーを使って本番アプリをテストできる、閉鎖的でセキュアなステージング環境を用意し、公開前に新しい文字列を追加しておくことをおすすめします。これにより、誰かがあなたの秘密のAPIキーを盗むのを防ぎ、無関係な新しい文字列を追加して翻訳プロジェクトが肥大化するのを防げます。
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!