Next.jsアプリケーションでApp Routerを使用して国際化を実装する方法
Make your React application more accessible and reach new markets with internationalization (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キーをクライアントサイドの本番環境に漏らさないようにしてください。
さらに二つの環境変数を追加します: 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キーを使用してクライアントを作成する必要があります。たとえば、/utilities/tacotranslate.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 は、いくつかの組み込みエラーハンドリングを持つユーティリティ関数です。次に、/components/tacotranslate.tsx という名前のファイルを作成し、そこで TacoTranslate プロバイダーを実装します。
'use client';
import React, {type ReactNode} from 'react';
import ImportedTacoTranslate, {
type TranslationContextProperties,
} from 'tacotranslate/react';
import tacoTranslate from '@/utilities/tacotranslate';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslate}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}'use client'; は、これがクライアントコンポーネントであることを示しています。
コンテキストプロバイダーの準備が整ったので、/app/[locale]/layout.tsxという名前のファイルを作成します。これはアプリケーションのルートレイアウトです。このパスには、Dynamic Routesを利用するフォルダが含まれており、ここで[locale]は動的パラメータです。
import React, {type ReactNode} from 'react';
import {isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslate from '@/utilities/tacotranslate';
import TacoTranslate from '@/components/tacotranslate';
import {customGenerateMetadata} from '@/utilities/generate-metadata';
export async function generateStaticParams() {
const locales = await tacoTranslate.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: {locale: string};
readonly children: ReactNode;
};
export default async function RootLayout({
params: {locale},
children,
}: RootLayoutParameters) {
const origins = [process.env.TACOTRANSLATE_ORIGIN];
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
const localizations = await tacoTranslate.getLocalizations({locale, origins});
return (
<html lang={locale} dir={direction}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
<div id="content">{children}</div>
</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!" />
);
}次のことに注意してください：revalidate 変数は、Next.js に対して 60 秒後にページを再構築し、翻訳を最新の状態に保つよう指示します。
ステップ 4: サーバーサイドレンダリングの実装
TacoTranslateはサーバーサイドレンダリングをサポートしています。これにより、未翻訳のコンテンツが最初に表示されるのではなく、翻訳されたコンテンツが即座に表示されるため、ユーザーエクスペリエンスが大幅に向上します。さらに、クライアント側でのネットワークリクエストをスキップできるため、ユーザーが閲覧しているページに必要な翻訳はすでに持っています。
サーバーサイドレンダリングを設定するには、/next.config.js を作成または変更します:
const tacoTranslate = require('./utilities/tacotranslate');
module.exports = async () => {
const locales = await tacoTranslate.getLocales();
const isProduction =
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production');
const [projectLocale] = locales;
return {
env: {
TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
TACOTRANSLATE_API_KEY: isProduction
? process.env.TACOTRANSLATE_PUBLIC_API_KEY
: process.env.TACOTRANSLATE_SECRET_API_KEY,
TACOTRANSLATE_PROJECT_LOCALE: projectLocale,
TACOTRANSLATE_PROJECT_LOCALES: JSON.stringify(locales),
TACOTRANSLATE_IS_PRODUCTION: String(isProduction),
},
};
};ここでいくつかの注意点があります。まず、翻訳プロジェクトのために有効にしたすべての言語を取得しています。この応答配列の最初の文字列は、プロジェクト作成時に設定したオリジンロケールコードになります。
さて、重要な部分です：プロダクション環境にいるかどうかを判断します。isProduction チェックをあなたの設定に合わせて変更してください。ローカル、テスト、またはステージング環境にいる場合、新しい文字列が翻訳のために送信されるように、秘密の read/write API キーを使用する必要があります。もしプロダクション環境にいるなら、パブリックな read キーを使用するべきです。
ルーティングとリダイレクションが期待通りに機能するように、/middleware.tsという名前のファイルを作成する必要があります。Middlewareを使用することで、ユーザーを好みの言語で表示されるページにリダイレクトできます。
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/utilities/tacotranslate';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}matcher を Next.js Middleware ドキュメント に従って設定してください。
クライアントでは、locale クッキーを変更して、ユーザーの希望する言語を変更できます。これを実現する方法については、完全な例のコードをご参照ください！
ステップ 5: デプロイしてテスト！
完了しました！あなたのReactアプリケーションは、Translateコンポーネントに文字列を追加することで自動的に翻訳されるようになります。注意点として、read/write権限を持つ環境のみが翻訳される新しい文字列を作成できることをお知らせします。このようなAPIキーで本番アプリケーションをテストできる閉じられた安全なステージング環境を持つことをお勧めします。本番環境に移行する前に新しい文字列を追加することで、誰かがあなたの秘密のAPIキーを盗み、無関係な新しい文字列を追加することで翻訳プロジェクトが膨らむのを防ぐことができます。
必ず完全な例を確認してください。そこで、Pages Routerを使用してこれを行う方法の例も見つけることができます！問題が発生した場合は、遠慮なくお問い合わせください。喜んでお手伝いします。
TacoTranslateを使用すると、Reactアプリケーションを迅速に任意の言語に自動的にローカライズできます。 今すぐ始めましょう！