Next.jsアプリにおける国際化（i18n）に最適なソリューション

仕組み

世界がますますグローバル化する中で、ウェブ開発者が異なる国や文化のユーザーに対応できるアプリケーションを構築することはますます重要になっています。そのための重要な方法の一つが国際化（i18n）であり、これによりアプリケーションを異なる言語、通貨、日付フォーマットに適応させることができます。

このチュートリアルでは、React Next.jsアプリケーションにサーバーサイドレンダリングを用いた国際化を追加する方法を探ります。 TL;DR: 完全な例はこちらをご覧ください。

このガイドは Pages Router を使用している Next.js アプリケーション向けです。
もし App 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 の設定

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

間もなく自動的に TACOTRANSLATE_API_KEY を定義します。

クライアントを別のファイルに作成することで、後で再利用しやすくなります。さて、カスタムの /pages/_app.tsx を使って、TacoTranslate プロバイダーを追加します。

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

すでにカスタムの pageProps と _app.tsx をお持ちの場合は、上記のプロパティとコードで定義を拡張してください。

ステップ4： サーバーサイドレンダリングの実装

TacoTranslate は翻訳のサーバーサイドレンダリングを可能にします。これにより、まず未翻訳のコンテンツが一瞬表示されるのではなく、翻訳済みのコンテンツを即座に表示できるため、ユーザー体験が大幅に向上します。さらに、必要な翻訳がすべて揃っているため、クライアントでのネットワークリクエストを省略することも可能です。

まずは /next.config.js を作成するか、修正することから始めます。

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

isProductionチェックを設定に合わせて変更します。trueすると、TacoTranslateは公開APIキーを表示します。ローカル環境、テスト環境、またはステージング環境 (isProduction is false) を使用している場合は、シークレット API キーread/writeを使用して、新しい文字列が翻訳のために送信されることを確認します。

これまでのところ、Next.jsアプリケーションには対応言語のリストを設定しただけです。次に行うのは、すべてのページの翻訳を取得することです。そのためには、ご要望に応じて getTacoTranslateStaticProps または getTacoTranslateServerSideProps のいずれかを使用します。

これらの関数は3つの引数を取ります：1つはNext.js Static Props Contextオブジェクト、もう1つはTacoTranslateの設定、そしてオプションのNext.jsのプロパティです。なお、getTacoTranslateStaticPropsのrevalidateはデフォルトで60に設定されており、これにより翻訳が最新の状態に保たれます。

どちらの関数をページで使用する場合でも、例えば/pages/hello-world.tsxのようなページファイルがあると仮定しましょう。

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

これで、すべてのReactコンポーネント内で文字列を翻訳するためにTranslateコンポーネントを使用できるようになっているはずです。

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ステップ5： デプロイしてテスト！

これで完了です！Next.js アプリケーションでは、Translate コンポーネントに文字列を追加すると、自動的に翻訳されるようになります。なお、API キーに対して read/write 権限を持つ環境のみが、新しい翻訳文字列を作成することができます。本番環境で使用する前に、そのような API キーを使用してアプリケーションをテストできる、閉鎖され安全なステージング環境を用意することをお勧めします。これにより、誰かがあなたの秘密の API キーを盗むのを防ぎ、関係のない新しい文字列を追加して翻訳プロジェクトが膨らむことを防止できます。

ぜひGitHubのプロフィールで完全な例をチェックしてください。そこでは、App Routerを使った方法の例も見つけることができます。もし何か問題があれば、遠慮なくご連絡ください。喜んでお手伝いいたします。

TacoTranslateは、あなたのReactアプリケーションを任意の言語に迅速に自動ローカライズすることができます。今すぐ始めましょう！