Pages Router を使用している Next.js アプリケーションに国際化を実装する方法
Reactアプリケーションをよりアクセシブルにし、国際化(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キーを使ってクライアントを作成する必要があります。例えば、/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: デプロイしてテスト!
完了です!これであなたのReactアプリケーションは、Translate
コンポーネントに文字列を追加すると自動的に翻訳されるようになります。APIキーにread/write
権限がある環境のみが、新しい翻訳対象の文字列を作成できることにご注意ください。公開前に新しい文字列を追加しながら、APIキーを使って本番アプリケーションをテストできる、閉じた安全なステージング環境を用意することをお勧めします。これにより、秘密のAPIキーが盗まれるのを防ぎ、また無関係な文字列が追加されて翻訳プロジェクトが膨れ上がるのを防止できます。
必ずGitHubのプロフィールで完全な例を確認してください。そこには、App Routerを使った方法の例もあります!何か問題があれば、いつでもお問い合わせください。喜んでお手伝いします。
TacoTranslateは、あなたのReactアプリケーションを75以上の言語に迅速に自動ローカライズできます。今すぐ始めましょう!