TacoTranslate
/
ドキュメント価格設定
 
記事
5月04日

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

Next.js アプリケーションを新しい市場に展開したいとお考えですか?TacoTranslate を使えば、Next.js プロジェクトのローカライズが非常に簡単になり、手間をかけずにグローバルなユーザーにリーチできます。

Next.jsにTacoTranslateを選ぶ理由は?

  • シームレスな統合:Next.jsアプリケーション向けに設計されたTacoTranslateは、既存のワークフローに簡単に統合できます。
  • 自動文字列収集:JSONファイルの手動管理はもう不要です。TacoTranslateはコードベースから自動的に文字列を収集します。
  • AI駆動の翻訳:AIの力を活用し、アプリケーションのトーンに合った文脈的に正確な翻訳を提供します。
  • 即時言語サポート:クリックひとつで新しい言語のサポートを追加し、アプリケーションをグローバルにアクセス可能にします。

仕組み

世界がますますグローバル化する中で、ウェブ開発者が異なる国や文化のユーザーに対応できるアプリケーションを構築することがますます重要になっています。その実現方法の一つが国際化(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ファイルに追加することができます。

.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

さらに、2つの環境変数 TACOTRANSLATE_DEFAULT_LOCALETACOTRANSLATE_ORIGIN も追加します。

  • TACOTRANSLATE_DEFAULT_LOCALE: デフォルトのフォールバックロケールコードです。この例では、en(英語)に設定します。
  • TACOTRANSLATE_ORIGIN: 文字列が保存される「フォルダ」、例えばあなたのウェブサイトのURLです。オリジンについてはこちらをご覧ください。
.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プロパティです。なお、getTacoTranslateStaticPropsrevalidateはデフォルトで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: デプロイしてテスト!

完了です!Next.js アプリケーションは、Translate コンポーネントに文字列を追加すると自動的に翻訳されます。APIキーに対して read/write 権限を持つ環境のみが、新しい翻訳文字列を作成できます。実稼働前に新しい文字列を追加してテストできる、閉じた安全なステージング環境を用意することをお勧めします。これにより、秘密の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!

Nattskiftetの製品ノルウェー製