App Routerを使用しているNext.jsアプリケーションで国際化（i18n）を実装する方法
Reactアプリケーションのアクセシビリティを向上させ、国際化（i18n）によって新しい市場に進出しましょう。
世界がますますグローバル化する中、ウェブ開発者は異なる国や文化のユーザーに対応できるアプリケーションを構築することがますます重要になっています。これを実現する主要な方法の一つが国際化（i18n）であり、アプリを異なる言語、通貨、日付形式に合わせて調整できます。
この記事では、サーバーサイドレンダリングを用いてReact Next.jsアプリケーションに国際化を追加する方法を解説します。 TL;DR: 完全な例はこちらをご覧ください。
このガイドは App Router を使用している Next.js アプリケーション向けです。
もし Pages Router を使用している場合は、代わりにこちらのガイドを参照してください。
ステップ1：i18nライブラリをインストールする
Next.jsアプリケーションで国際化を実装するには、まず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 のミドルウェアのドキュメントに従って 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!