App Router を使用している Next.js アプリケーションで国際化を実装する方法
国際化（i18n）により、React アプリケーションのアクセシビリティを向上させ、新たな市場に展開しましょう。
世界がますますグローバル化するにつれて、ウェブ開発者は異なる国や文化のユーザーに対応できるアプリケーションを構築することがますます重要になっています。これを実現する重要な方法の一つが国際化（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 キーと一つの 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クッキーを変更することができます。やり方の参考として 完全なサンプルコード をご覧ください！
Step 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!