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キータブに移動します。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);
}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!