はじめに

まずはお使いの React フレームワークをクリックしてください：

npx gtx-cli@latest

General Translation とは？

General Translation は、多言語アプリを迅速かつ容易にリリースできる、国際化（i18n）スタックの総合ソリューションです。

General Translation には次が含まれます：

• React と Next.js 向けのオープンソース開発者ライブラリ
• AI 翻訳サービス
• 翻訳コンテンツ配信のための完全なインフラパッケージ

GT のライブラリを独自の翻訳プロバイダーと併用したい場合は、gt-next および gt-react のスタンドアロン版ドキュメントをご覧ください。

独自の i18n ライブラリを使いつつ、General Translation の AI 翻訳サービスだけを利用したい場合は、CLI ツール のドキュメントをご覧ください。

General Translation を使って JSON、Markdown、または MDX のファイルを翻訳したい場合は、CLI ツール のドキュメントをご覧ください。

npx gtx-cli@latest

セットアップウィザードを実行して始めましょう！

機能

⚛️ Reactコンポーネント全体をインラインで翻訳

• 開始タグと終了タグを持つ1つの <T> コンポーネントだけで、Reactコンポーネント全体を翻訳できます。
  • 複雑なリファクタリングや煩雑な関数呼び出しは不要です。
• コンテンツはインラインで、コードと同じ場所に置かれます。
  • キーや文字列、追加のファイルは不要です！
• ライブラリが裏側で i18n のロジックをすべて管理するため、対応は不要です。
• 翻訳は常にソースコードと同期されます。
• 翻訳にはコンテンツの文脈情報が含まれるため、より正確になります。

export default function Page() {
  return (
    <T>
      <p>{'<T>'}コンポーネントの子要素として任意のJSXを記述できます。</p>
      <p>
        例えば、<a href='/'>リンク</a>を記述すれば、そのテキストがコンテキストに応じて翻訳されます。
      </p>
      <div>
        <div>
          <p>深くネストされたコンポーネントもコンテキストに応じて翻訳されます。</p>
          <button>クリックしてください!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 既存ライブラリと同等の機能

• GT のライブラリは、i18next、react-intl、next-intl などの既存ライブラリと同等の機能に対応しています。
• dictionaries、複数形、通貨、自動ルーティングなどの機能をすべてサポートします。

🧠 無料のAI搭載翻訳サービス

• 無料のAI搭載翻訳サービスで、アプリの翻訳を数秒で作成できます。
• Translation hot reload により、作業中の翻訳が自動的に更新されます。
• 言語に合わせて、HTML コンテンツが再配置・カスタマイズされます。

🔧 開発者にやさしい

• セットアップは簡単で、数分で完了します。
• すべての GT ライブラリはオープンソースで、単体でも動作します。
  • 既存の翻訳プロバイダを使うことも、当社の無料の AI ベース翻訳サービスを使うこともできます。
• t('menu.header.title') のような翻訳キーの管理に時間を費やす必要はありません。
  • すべてインラインで書くだけ！

ソースコードとサンプルプロジェクトは GitHub リポジトリ をご覧ください。

なぜ General Translation を選ぶのか？

**General Translation は i18n をまるごとカバーするスタックです。**開発者向けライブラリ、AI 翻訳、そして多言語アプリのためのインフラ一式を提供します。

当社のライブラリはお使いの翻訳プロバイダーと自由に組み合わせられますし、既存の i18n ライブラリに当社の無料 AI 翻訳サービスを組み合わせて使うこともできます。

シームレスなエンドツーエンドの i18n 体験のため、当社のライブラリと翻訳サービスの併用をおすすめします。

gt-react や gt-next などの GT ライブラリを使えば、次のことが可能です:

1. 文字列だけでなく、React コンポーネント全体を翻訳する

<T> コンポーネントの children に渡された UI は、JSX ツリーがどれほど複雑でも翻訳されます。例：

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        <b>{`<T>`}コンポーネント</b>の子要素はすべて翻訳されます。
      </p>
      <p>
        <a href='/'>リンク</a>
        {', '}
        <button>ボタン</button>
        {', '}
        さらに{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> 深くネストされたコンポーネント </div>{' '}
          </div>{' '}
        </div>{' '}
        なども翻訳されます。
      </p>
    </T> 
  );
}

2. クライアントコンポーネントとサーバーコンポーネントの両方を翻訳する

Next.js の App Router と React Server Components をネイティブにサポートしているため、 クライアントコンポーネントとサーバーコンポーネントの両方を翻訳できます。

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      こんにちは、<Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      こんにちは、<Var>{name}</Var>
    </T>
  );
}

3. コンテンツをインラインまたはdictionariesで記述する

<T> コンポーネント内に置かれた JSX コンテンツは、翻訳対象としてマークされます。

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>Hello, world!</p> {/* <p>Hello, world!</p> を翻訳 */}
    </T>
  );
}

従来のdictionary方式を好む場合は、コンテンツをdictionaryファイルに記述することもできます:

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // "Hello, world!" を翻訳
}

4. 開発環境で翻訳済みコンテンツを確認

UI が各言語でどう見えるか心配する必要はありません。 General Translation が、入力と同時にリアルタイムでコンテンツを自動翻訳します。

本番で UI を何度も手直しする代わりに、 英語でコンテンツを一度書くだけで、あとは General Translation に任せましょう。

デプロイ前に、UI 要素がドイツ語でどう表示されるか確認したいですか？問題ありません。General Translation が自動で翻訳します！

5. 必要なときにコンテンツを翻訳する

アプリでは、実行時になって初めて判明するコンテンツを翻訳する必要が生じることがよくあります。 Next.js では、GT のライブラリがオンデマンドでのコンテンツ翻訳に対応しています。

よくある例としては次のとおりです:

• ユーザー個別の情報
• リモートに保存されたコンテンツ
• 動的に生成されるコンテンツ

翻訳が読み込まれると、新しい翻訳内容でコンポーネントがリアルタイムに更新されます。

はじめに

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

グローバル展開の準備はできていますか？ 数分でアプリの翻訳を始め、世界中のユーザーに届けましょう。