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などです。originについてはこちらをご覧ください。
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 Middleware ドキュメントに従って、必ず 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!