文字列の翻訳
文字列を翻訳する方法
概要
このガイドは、Next.js アプリで文字列を翻訳する方法を、useGT、getGT、tx を用いて段階的に解説するチュートリアルです。
前提条件
プロジェクトにすでに gt-next をインストールしており、クイックスタートガイドに従っている、または現在進行中であることを前提とします。
文字列の翻訳
クライアントサイドコンポーネント
クライアントサイドの文字列には、useGT を使用してください。
なお、useGT は必ず <GTProvider> の子コンポーネント内で呼び出す必要があります。
import { useGT } from 'gt-next';
export default function MyComponent() {
const t = useGT();
return (
<div>
<h1>{t('これは翻訳される文字列です')}</h1> // [!code highlight]
</div>
);
}サーバーサイドコンポーネント
サーバー側の文字列には、getGT を使用します。
import { getGT } from 'gt-next/server';
export default async function Home() {
const t = await getGT();
return (
<div>
<h1>{t('これは翻訳される文字列です')}</h1> // [!code highlight]
</div>
);
}注意:
開発中に実行時翻訳を行っている場合、getGT から取得した文字列の翻訳を反映して表示するには、ページを再読み込みする必要があります。
本番環境ではこの問題は発生しません。
変数の追加
変数は値が変わる可能性がありますが、翻訳の対象にはなりません。 文字列に変数を追加するには、次のパターンを使います。
import { useGT } from 'gt-next';
export default function MyComponent() {
const t = useGT();
return (
<div>
<h1>{t('こんにちは、{username}さん', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
</div>
);
}動的コンテンツ
変化する文字列があるとします。
実行時に文字列を翻訳するには、tx 関数を使用できます。
import { tx } from 'gt-next/server';
export default async function MyComponent({ username }) {
const translation = await tx(`Hello, ${username}. How is your day?`);
return (
<div>
<h1>{translation}</h1> // [!code highlight]
</div>
);
}注意事項
- 文字列の翻訳には、
useGT、getGT、txを使用します。 useGTとgetGTはデプロイ前に翻訳を行い、txは実行時に翻訳します。txの使用は必要最小限にとどめてください。{ variables: { key: value } }パターンを使って、文字列に variables を挿入できます。
次のステップ
- プロジェクトの翻訳設定を完了するには、クイックスタートガイドに戻ってください。
useGT、getGT、txのAPIリファレンスを参照してください。
このガイドはどうでしたか？