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キーのタブに移動します。 read キーを1つ、 read/write キーを1つ作成してください。これらは環境変数として保存します。 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_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]）、新しい文字列が翻訳に送信されるように、秘密の read/write APIキーを使用します。

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

これらの関数は3つの引数を取ります。1つは Next.js Static Props Context オブジェクト、2つ目は 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キーを誰かに盗まれたり、無関係な新しい文字列を追加されて翻訳プロジェクトが膨らむのを防ぐことができます。

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 App 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!