React セットアップ

使用方法

npx gtx-cli setup

概要

gtx-cli setupコマンドは、gt-nextまたはgt-reactを使用した翻訳のためにプロジェクトを自動的にセットアップします。 これは、プロジェクトのファイルツリーを解析し、babelを使用して静的コンテンツの周りに<T>コンポーネントをラップすることで行われます。 動的コンテンツは自動的に<Var>コンポーネントでラップされます。

このコマンドはinitセットアップウィザードの一部として実行されます。さらに、このコマンドはnpx gtx-cli setupを介して独立して実行することもできます。

このコマンドは、プロジェクトを初めて国際化する際に一度だけ実行する必要があります。 その後の変更では、プロジェクトを更新するためにscanコマンドを使用する必要があります。

詳細については、scanコマンドを参照してください。

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

export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, world! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

プロジェクトがNext.js App Routerを使用している場合、setupコマンドは適切なlayout.jsxファイル内に<GTProvider>コンポーネントを追加します。

Parameters

動作

設定ファイル

CLIツールを初回実行時に、プロジェクトのルートにgt.config.jsonファイルを作成しようとします。 このファイルには、コンテンツの翻訳に使用されるプロジェクトのメタデータが含まれています。

gt.config.jsonファイルの詳細についてはこちらをご覧ください。

idプロパティ

setupコマンドは、<T>コンポーネントに対して一意のIDを自動生成するオプションを提供します。 これは、多くの<T>コンポーネントを使用するプロジェクトで、それぞれに手動で一意のIDを割り当てる必要を避けたい場合に便利です。

このidは、翻訳エディターやコンソールで特定の翻訳を参照する際に役立ちます。

<T>の注入動作

基本的なケース

CLIは可能な限り最上位レベルでJSX要素をラップします。 これは、まだラップされていない場合、コンポーネント全体を<T>コンポーネントでラップすることを意味します。

<div>Hello, world!</div> -> <T id="SOME_ID"><div>Hello, world!</div></T>

<T>コンポーネントのラップ方法の詳細については、リファレンスをご覧ください。

<GTProvider>の動作

Next.js App Routerの場合、setupコマンドは適切なlayout.jsxファイル内で<T>コンポーネントを<GTProvider>コンポーネントで自動的にラップします。

さらに、next.config.jsファイルにwithGTConfig Next.jsプラグインを設定します。

自動フォーマット

setupコマンドは、プロジェクトの設定に応じて、Prettier、Biome、またはESLintを使用してコードベースに加えた変更を自動的にフォーマットします。