App Router を使用している Next.js アプリケーションで国際化を実装する方法
国際化（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!" />
);
}60秒後にページを再ビルドし、翻訳を最新の状態に保つよう Next.js に指示する 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);
}必ず matcher を Next.js のミドルウェアに関するドキュメント に従って設定してください。
クライアント側では、ユーザーの優先言語を変更するために 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!