概要
General Translation の Next.js SDK 概要
はじめに
General Translation の Next.js SDK は、Next.js アプリケーション向けのオープンソースの国際化（i18n）ライブラリです。
この SDK は、他の一般的な i18n ライブラリと同等の機能を備えつつ、Next.js アプリケーションを簡単かつ保守しやすく国際化できる包括的なツールセットを提供します。React SDK を基盤としており、Next.js 固有の追加機能も提供します。
この SDK は General Translation のプラットフォームなしでも単体で利用でき、他の i18n ライブラリと同様に動作します。
さらに、当社のプラットフォームと統合することで、次のような拡張機能も利用できます：
- 開発環境での翻訳ホットリロード
- 自動 AI 翻訳
- General Translation プラットフォームとの翻訳同期
- 翻訳 CDN とのネイティブ統合
- 本番環境における React コンポーネントのオンデマンド翻訳（サーバー側）
コンセプト
このSDKを理解するうえで重要なコンセプトは6つあります。
withGTConfig による初期化
withGTConfig 関数は、Next.js アプリケーションで SDK を初期化します。
SDK を構成するために、next.config.[js|ts] ファイルに追加します:
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// next.config.tsのオプション
};
export default withGTConfig(nextConfig, {
// GTの設定
});詳しくはwithGTConfig APIリファレンスをご覧ください。
<GTProvider> コンポーネント
<GTProvider> コンポーネントは、現在の言語や関連する翻訳を含む翻訳コンテキストをアプリケーションに提供します。
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
);
}重要: プロバイダーはアプリケーション全体をラップし、コンポーネントツリーのできるだけ高い位置（例：ルートレイアウト）に配置してください。
プロバイダーが必要なのはクライアントサイドの機能に限られます。サーバーサイドのみのアプリケーションでは不要ですが、含めておいても問題ありません。
詳しくは、GTProvider のAPIリファレンスをご覧ください。
<T> コンポーネント
<T> コンポーネントは、アプリケーション内のコンテンツを翻訳するための推奨手段です。
任意の JSX 要素をラップできる React コンポーネントで、要素の内容をサポート対象の言語に自動的にレンダリングします。
例
<T>
<div>こんにちは、世界！</div>
</T><T>
<div>
<h1> こちらに画像があります </h1>
<img src="https://example.com/image.png" alt="例" />
</div>
</T><T>
`<T>`コンポーネントを使用すると、フォーマットを簡単に行うことができます。
<Num>{1000}</Num>
<DateTime>{new Date()}</DateTime>
<Currency currency="USD">{1000}</Currency>
</T><T> コンポーネントは、動的コンテンツのフォーマットに、<Num>、<DateTime>、<Currency> などのvariable componentsと組み合わせて使用できます。
<T> コンポーネントのさまざまな使い方については、<T> コンポーネントガイドをご覧ください。
useGT フック
useGT フックは、いくつかのトレードオフはあるものの、<T> コンポーネントと同様に使える React のフックです。
このフックは、文字列を翻訳するために使える関数を返します。
const t = useGT();
t('こんにちは、世界！');<T> コンポーネントと比べて、useGT フックはコードベースでより柔軟に利用できます。
例えば、ネストされた文字列を含む複雑なデータ構造がある場合は、<T> コンポーネントの利用はより難しくなります。
const t = useGT();
const data = {
title: t('こんにちは、世界！'),
description: t('これは説明です'),
};useGT フックの詳細は、strings ガイドをご覧ください。
msg 関数
msg 関数は、複数のコンポーネントで使われる、または設定オブジェクトに保存される翻訳対象の文字列をマークするために使用します。
これは、ナビゲーションラベル、フォームメッセージ、アプリ全体の複数箇所に表示されるテキストなどの共有コンテンツに特に有用です。
// 翻訳用の文字列をマーク
import { msg } from 'gt-next';
const navItems = [
{ label: msg('ホーム'), href: '/' },
{ label: msg('概要'), href: '/about' },
{ label: msg('お問い合わせ'), href: '/contact' }
];// マークされた文字列をデコードして使用
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
<nav>
{navItems.map(item => (
<a key={item.href} href={item.href}>
{m(item.label)}
</a>
))}
</nav>
);
}msg 関数は翻訳用のメタデータ付きで文字列をエンコードし、useMessages（サーバーコンポーネントでは getMessages）がそれをデコードします。
msg 関数の詳細は、shared strings ガイドをご覧ください。
useTranslations フック
useTranslations は、指定したキーに対応する翻訳を取得するための関数を返す React のフックです。
const dictionary = {
hello: {
world: 'こんにちは、世界！',
},
};const translate = useTranslations();
translate('hello.world');この挙動は、react-i18next や next-intl などの他の翻訳ライブラリと同様です。
アプリケーションで useTranslations フックを使用することは推奨しません。useTranslations フックを多用すると、コードベースの保守性が低下し、
大きな技術的負債につながります。
代わりに、<T> コンポーネントまたは useGT フックの使用をおすすめします。
ほかの i18n ライブラリから移行中の場合、useTranslations フックはドロップインで置き換え可能で、コードベースを段階的に移行するのに役立ちます。
useTranslations フックについては、dictionaries ガイドをご覧ください。
詳しくは、useTranslations APIリファレンス を参照してください。
次のステップ
このガイドはどうでしたか？