TacoTranslate
/
ドキュメンテーション価格情報
 
チュートリアル
5月04日

App Routerを使用しているNext.jsアプリケーションに国際化を実装する方法

Reactアプリケーションをよりアクセシブルにし、国際化（i18n）で新しい市場にリーチしましょう。

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

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

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

  • TACOTRANSLATE_DEFAULT_LOCALE: デフォルトのフォールバックロケールコードです。この例では、英語のためにenに設定します。
  • TACOTRANSLATE_ORIGIN: 文字列が保存される「フォルダー」で、あなたのウェブサイトのURLなどが該当します。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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

まもなく、自動的にTACOTRANSLATE_API_KEYとTACOTRANSLATE_PROJECT_LOCALEを定義します。

クライアントを別のファイルで作成することで、後で再利用しやすくなります。getLocales は、いくつかの組み込みエラーハンドリングを備えたユーティリティ関数に過ぎません。次に、/app/[locale]/tacotranslate.tsx という名前のファイルを作成し、そこで TacoTranslate プロバイダーを実装します。

/app/[locale]/tacotranslate.tsx
'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

これはクライアントコンポーネントであることを示す 'use client'; に注意してください。

コンテキストプロバイダーの準備が整ったので、アプリケーションのルートレイアウトとなる /app/[locale]/layout.tsx というファイルを作成します。このパスには Dynamic Routes を利用したフォルダがあり、ここで [locale] は動的パラメータとなっています。

/app/[locale]/layout.tsx
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

ここで最初に注目すべき点は、言語の翻訳を取得するために Dynamic Route のパラメータ [locale] を使用していることです。さらに、 generateStaticParams は、プロジェクトで有効化されているすべてのロケールコードが事前レンダリングされるようにしています。

それでは、最初のページを作成しましょう！ /app/[locale]/page.tsx という名前のファイルを作成してください。

/app/[locale]/page.tsx
import React from 'react';
import {Translate} from 'tacotranslate/react';

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

Next.jsに60秒後にページを再構築させ、翻訳を最新の状態に保つことを指示するrevalidate変数に注目してください。

ステップ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 = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

isProduction チェックをあなたの環境に合わせて修正してください。もし true であれば、TacoTranslate は公開用の API キーを表示します。ローカル、テスト、またはステージング環境（isProduction is false] の場合は、新しい文字列が翻訳に送信されるように、秘密の read/write API キーを使用します。

ルーティングとリダイレクションが期待どおりに動作するように、/middleware.tsというファイルを作成する必要があります。Middleware を使うことで、ユーザーを希望の言語で表示されるページへリダイレクトできます。

/middleware.ts
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Next.js Middlewareドキュメント に従って、matcher を必ず設定してください。

クライアント側では、ユーザーの優先言語を変更するために locale クッキーを変更することができます。方法については 完全なサンプルコード をご覧ください！

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

これで完了です！Reactアプリケーションは、Translateコンポーネントに文字列を追加すると、自動的に翻訳されるようになります。なお、read/write権限を持つAPIキーが設定された環境のみ、新しい翻訳用の文字列を作成することが可能です。本番環境に移行する前に、新しい文字列を追加してテストできる閉鎖的で安全なステージング環境を用意することをおすすめします。これにより、秘密のAPIキーの盗用を防ぎ、翻訳プロジェクトが無関係な文字列で膨れ上がるのを防ぐことができます。

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

TacoTranslateを使えば、Reactアプリケーションをどんな言語にも素早く自動でローカライズできます。さあ、今日から始めましょう！

Nattskiftet の製品ノルウェー製