概要

はじめに

General Translation Next.js SDKは、Next.js向けのオープンソース国際化（i18n）ライブラリです。

Next.jsアプリケーションを簡単かつ保守しやすい方法で国際化するためのツールセットを提供し、 他の人気のあるi18nライブラリと同等の機能を備えています。 React SDKをベースに構築されており、Next.js固有の追加機能を提供します。

Next.js SDKはGeneral Translationプラットフォームなしでも使用でき、他のi18nライブラリと非常に似た動作をします。

しかし、当社のプラットフォームとも統合されており、以下のような追加機能を提供します：

• 開発環境での翻訳ホットリロード
• 自動AI翻訳
• General Translationプラットフォームとの翻訳同期
• 翻訳CDNとのネイティブ統合
• 本番環境でのReactコンポーネントのオンデマンド翻訳（サーバーサイド）

コンセプト

SDKについて理解すべき主要なコンセプトが5つあります。

withGTConfigによる初期化

withGTConfig関数は、Next.jsアプリケーションでSDKを初期化するために使用される関数です。

この関数はnext.config.[js|ts]ファイルに配置し、SDKの設定に使用します。

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Your next.config.ts options
};

export default withGTConfig(nextConfig, {
  // Your GT configuration
});

詳細については、withGTConfig APIリファレンスを参照してください。

<GTProvider> コンポーネント

import { GTProvider } from 'gt-next';

<GTProvider> コンポーネントは、アプリケーションに追加する必要がある主要なコンポーネントです。

これは、アプリケーションの残りの部分にコンテキストを提供するために使用されます。

このコンテキストには、現在の言語とその言語に関連する翻訳が含まれます。

プロバイダーは、クライアントサイド機能を使用している場合にのみ必要です。 サーバーサイド機能のみを使用している場合、プロバイダーは必要ありませんが、それでも含めることができます。

重要な考慮事項

• プロバイダーはアプリケーション全体をラップする必要があります。
• 理想的には、ルートレイアウトなど、ツリーの可能な限り高い位置に配置する必要があります。

詳細については、GTProvider ページを参照してください。

<T> コンポーネント

<T> コンポーネントは、アプリケーション内でコンテンツを翻訳するための推奨方法です。

これは任意のJSX要素をラップするために使用できるReactコンポーネントで、要素のコンテンツを自動的にサポートされている言語にレンダリングします。

例

<T>
  <div>Hello, world!</div>
</T>

<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>

<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency>{1000}</Currency>
</T>

<T>コンポーネントの様々な使用方法については、componentsガイドをご覧ください。

<T>コンポーネントのAPIについては、T API Referenceをご覧ください。

useGT フック

useGT フックは、<T> コンポーネントと同様に使用できるReactフックですが、いくつかのトレードオフがあります。

このフックは、文字列を翻訳するために使用できる関数を返します。

const translate = useGT();

translate('Hello, world!');

<T> コンポーネントと比較して、useGT フックはコードベースでより柔軟性を提供します。

例えば、ネストした文字列を含む複雑なデータ構造がある場合、<T> コンポーネントの使用はより困難になります。

const t = useGT();
const data = {
  title: t('Hello, world!'),
  description: t('This is a description'),
};

useGT フックについて詳しく学ぶには、strings ガイドを参照してください。

詳細については、useGT API リファレンス を参照してください。

useTranslations フック

useTranslations フックは、指定されたキーの翻訳を取得するために使用できる関数を返すReactフックです。

const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};

const translate = useTranslations();
translate('hello.world');

この動作は、react-i18nextやnext-intlなどの他の翻訳ライブラリと似ています。

useTranslationsフックについて詳しく学ぶには、辞書ガイドをご覧ください。

詳細については、useTranslations APIリファレンスをご覧ください。

次のステップ

• SDKでNext.jsプロジェクトをセットアップする方法について学ぶ: クイックスタート
• useGTフックで文字列を翻訳する方法について学ぶ: 文字列の翻訳
• <T>コンポーネントでJSXコンテンツを翻訳する方法について学ぶ: JSXの翻訳