Next.js のアプリケーションで App Router を使用している場合の国際化の実装方法
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 変数に注意してください。
Step 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 キーを使って本番用アプリケーションをテストし、新しい文字列を追加できる閉鎖された安全なステージング環境を用意することをおすすめします。これにより、秘密の 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!