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

仕組み

世界がますますグローバル化するにつれて、ウェブ開発者が異なる国や文化のユーザーに対応できるアプリケーションを構築することの重要性が高まっています。これを実現する主要な方法の一つが国際化（i18n）であり、アプリケーションをさまざまな言語、通貨、日付形式に適応させることができます。

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

このガイドは Pages Router を使用している Next.js アプリケーション向けです。
もし App Router を使用している場合は、代わりにこちらのガイドをご覧ください。

Step 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 の設定、3つ目が任意の 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!