App Routerを使用しているNext.jsアプリケーションに国際化を実装する方法
Reactアプリケーションをよりアクセシブルにし、国際化（i18n）で新しい市場にリーチしましょう。
世界がますますグローバル化する中で、ウェブ開発者が異なる国や文化のユーザーに対応できるアプリケーションを構築することの重要性が高まっています。そのための重要な方法の一つが国際化（i18n）であり、これによりアプリケーションを異なる言語、通貨、日付形式に適応させることが可能になります。
この記事では、React Next.jsアプリケーションに国際化をサーバーサイドレンダリングと共に実装する方法について解説します。 TL;DR: 完全な例はこちらをご覧ください。
このガイドはNext.jsアプリケーションでApp Routerを使用している方向けです。
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キーが盗まれるのを防ぎ、無関係な文字列を追加することで翻訳プロジェクトが膨れ上がるのを防ぐことができます。
必ずGitHubのプロフィールで完全な例を確認してください。そこでは、Pages Routerを使用した方法の例も見つかります！問題が発生した場合は、遠慮なくお問い合わせください。喜んでサポートいたします。
TacoTranslateはReactアプリケーションを任意の言語で自動的に高速ローカライズします。今すぐ始めましょう！