App Router を使用している Next.js アプリケーションで国際化を実装する方法
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キーの盗用を防ぎ、無関係な文字列が翻訳プロジェクトに不要に増えるのを防ぐことができます。
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!