Next.jsアプリケーション（App Routerを使用している）で国際化（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キーのタブに移動します。1つのreadキーと1つのread/writeキーを作成します。それらを環境変数として保存します。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);
}必ず matcher を Next.js ミドルウェアのドキュメント に従って設定してください。
クライアント側では、ユーザーの優先言語を変更するために 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!