クイックスタート

はじめに

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 init

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

機能

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

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

export default function Page() {
  return (
    <T>
      <p>You can write any JSX as children of the {"<T>"} component.</p>
      <p>
        For example, you could write a <a href="/">link</a> and have the text be
        translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T> 
  );
}

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

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

🧠 無料のAI翻訳サービス

• 無料のAI翻訳サービスで、アプリの翻訳を数秒で作成できます。
• 翻訳ホットリロードにより、翻訳は書きながら自動的に更新されます。
• HTMLコンテンツは言語に合わせて再配置・カスタマイズされます。

🔧 開発者にやさしい

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

ソースコードやサンプルプロジェクトについてはGithubリポジトリをご覧ください。

なぜGeneral Translationを選ぶのか？

General Translationは完全なi18nスタックです。開発者ライブラリ、AI翻訳、そして多言語アプリのための完全なインフラストラクチャパッケージが含まれています。

私たちのライブラリを独自の翻訳プロバイダーと組み合わせて使用することも、無料のAI駆動翻訳サービスを独自のi18nライブラリと組み合わせて使用することもできます。

シームレスでエンドツーエンドのi18n体験のために、私たちのライブラリと翻訳サービスを組み合わせて使用することをお勧めします。

gt-reactやgt-nextなどのGTライブラリを使用すると、以下のことができます：

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

<T>コンポーネントの子要素として渡されたUIは、JSXツリーがどれほど複雑であっても翻訳されます。例えば：

import { T } from "gt-next";

export default function Page() {
  return (
    <T>
      <p>Any children of <b>the {`<T>`} component</b> will be translated.</p>
      <p>
        Things like <a href="/">links</a>{', '}
        <button>buttons</button>{', '}
        and even <div> <div> <div> deeply nested components </div> </div> </div>  are translated.
      </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>
      Hello, <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>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. インラインまたは辞書でコンテンツを記述

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

import { T } from "gt-next";

export default function Page() {
  return (
    <T>
      <p>Hello, world!</p>  {/* translates <p>Hello, world!</p> */}
    </T>
  )
}

または、従来の辞書アプローチを好む場合は、辞書ファイルにコンテンツを記述できます：

{
  "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'); // translates "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

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