TacoTranslate
/
ドキュメント料金
 
チュートリアル
5月04日

Pages Router を使用している Next.js アプリケーションで国際化（i18n）を実装する方法

国際化（i18n）を導入して、Reactアプリケーションのアクセシビリティを向上させ、新たな市場に展開しましょう。

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

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

このガイドは Next.js アプリケーションで Pages Router を使用している方向けです。
もし 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 キーと一つの read/write キーを作成します。 それらを環境変数として保存します。 read キーは public と呼ばれ、read/write キーは secret と呼ばれます。 例えば、プロジェクトのルートにある .env ファイルに追加できます。

.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

秘密の read/write APIキーをクライアント側の本番環境に決して漏らさないでください。

また、次の2つの環境変数を追加します: TACOTRANSLATE_DEFAULT_LOCALE と TACOTRANSLATE_ORIGIN。

.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ステップ3： TacoTranslateの設定

TacoTranslateをアプリケーションに統合するには、先ほどのAPIキーを使用してクライアントを作成する必要があります。例えば、/tacotranslate-client.jsという名前のファイルを作成します。

/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 プロバイダーを追加します。

/pages/_app.tsx
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 を作成するか、変更することから始めます。

/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 オブジェクト、TacoTranslate の設定、そして任意の Next.js プロパティです。なお、revalidate が getTacoTranslateStaticProps に対してデフォルトで60に設定されているため、翻訳が最新に保たれます。

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

/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： デプロイしてテスト！

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

必ずGitHub のプロファイルにある完全な例をご覧ください。そちらでは、App Router を使用した実装例も見つかります！もし問題が発生したら、遠慮なくお問い合わせください。喜んでサポートいたします。

TacoTranslate はあなたの React アプリを 75 以上の言語間で迅速に自動ローカライズします。 今すぐ始めましょう！

Nattskiftetの製品ノルウェー製