Next.jsアプリケーションでPages Routerを使用している場合の国際化の実装方法
Make your React application more accessible and reach new markets with internationalization (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キーを使用してクライアントを作成する必要があります。例えば、 /utilities/tacotranslate.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 Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import tacoTranslate from '../utilities/tacotranslate';
type PageProperties = {
origin: string;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<Component {...pageProps} />
</TacoTranslate>
);
}もし既にカスタムの pageProps および _app.tsx をお持ちの場合は、上記のプロパティとコードで定義を拡張してください。
ステップ 4: サーバーサイドレンダリングの実装
TacoTranslateはあなたの翻訳をサーバーサイドレンダリングで行うことを可能にします。これにより、最初に未翻訳のコンテンツが一瞬表示されるのではなく、翻訳されたコンテンツを即座に表示することでユーザー体験が大幅に向上します。さらに、必要な翻訳はすでに揃っているため、クライアント側でのネットワークリクエストを省略することができます。
まず /next.config.js を作成または修正することから始めます。
const tacoTranslate = require('./utilities/tacotranslate');
module.exports = async () => {
const locales = await tacoTranslate.getLocales();
const isProduction =
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production');
const [projectLocale] = locales;
return {
env: {
TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
TACOTRANSLATE_API_KEY: isProduction
? process.env.TACOTRANSLATE_PUBLIC_API_KEY
: process.env.TACOTRANSLATE_SECRET_API_KEY,
TACOTRANSLATE_DEFAULT_LOCALE: isProduction ? projectLocale : undefined,
},
i18n: {
defaultLocale: projectLocale,
locales,
},
};
};ここで注意すべき点がいくつかあります。まず、翻訳プロジェクトで有効にしているすべての言語を取得しています。レスポンス配列の最初の文字列は、プロジェクトに設定したロケールコードです。
ここで重要な点： 本番環境かどうかを判断することです。あなたの環境に合わせて isProduction チェックを修正してください。ローカル、テスト、またはステージング環境にいる場合は、新しい文字列が翻訳に送信されるように、秘密の read/write APIキーを使用すべきです。本番環境にいる場合は、公開の read キーを使用すべきです。
これまでの段階では、Next.js アプリケーションにサポートする言語のリストを設定しただけでした。次に行うのは、すべてのページの翻訳を取得することです。まず、新しいファイル /utilities/custom-get-static-props.ts を作成してください。
import {type GetStaticPropsContext} from 'next';
import {type Origin} from 'tacotranslate';
import tacoTranslate from './tacotranslate';
export default async function customGetStaticProps(
{
locale = process.env.TACOTRANSLATE_DEFAULT_LOCALE,
locales,
}: GetStaticPropsContext,
additionalOrigins: Origin[] = []
) {
const origin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [origin, ...additionalOrigins];
const localizations = await tacoTranslate.getLocalizations({locale, origins});
return {
props: {locale, locales, localizations, origin},
revalidate: 60,
};
}この関数は二つの引数を取ります：一つの Next.js Static Props Context オブジェクトと、アプリ内で複数のオリジンを使用している場合に翻訳を取得するための追加オリジンのオプション配列です。また、Next.js にページを60秒後に再構築するよう指示する return ステートメントの revalidate プロパティに注意してください。これにより、サーバーサイドでレンダリングされた翻訳が最新の状態に保たれます。
この関数をページで使用するには、/pages/hello-world.tsx のようなページファイルがあると仮定しましょう。
import {Translate} from 'tacotranslate/react';
import customGetStaticProps from '../utilities/custom-get-static-props';
export async function getStaticProps(context) {
return customGetStaticProps(context);
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}これで、すべてのReactコンポーネント内で文字列を翻訳するためにTranslateコンポーネントを使用できるようになりました。
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}ステップ5： デプロイしてテスト！
完了です！あなたのReactアプリケーションは、Translateコンポーネントに文字列を追加すると自動的に翻訳されるようになります。APIキーに対してread/write権限を持つ環境だけが、新しい翻訳用の文字列を作成できます。私たちは、公開前にそのようなAPIキーを使って本番アプリケーションをテストし、新しい文字列を追加できる、閉鎖された安全なステージング環境を持つことを推奨します。これにより、誰かに秘密のAPIキーが盗まれたり、無関係な新しい文字列を追加して翻訳プロジェクトが肥大化したりするのを防げます。
必ずGitHubのプロフィールで完全な例をチェックしてください。そこでは、App Routerを使った方法の例も見つかります！問題が発生した場合は、遠慮なくお問い合わせください。喜んでサポートいたします。
TacoTranslateはReactアプリケーションを任意の言語へ迅速に自動ローカライズします。今すぐ始めましょう！