はじめに

まずは、使用している 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 tool のドキュメントをご覧ください。

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

npx gtx-cli@latest init

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

機能

⚛️ 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翻訳サービスで、アプリの翻訳を数秒で作成できます。
• 翻訳のホットリロードにより、作業中に翻訳が自動更新されます。
• HTML コンテンツは言語に合わせて再配置・カスタマイズされます。

🔧 開発者に優しい

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

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

なぜ General Translation を選ぶのか？

General Translation は i18n のフルスタックです。 開発者向けライブラリ、AI 翻訳、多言語アプリ向けの完全なインフラを一式で提供します。

当社のライブラリは、お使いの翻訳プロバイダーと組み合わせて利用でき、または無料の AI 搭載翻訳サービスをお使いの i18n ライブラリと併用することもできます。

シームレスなエンドツーエンドの 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>こんにちは、世界!</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

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