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> コンポーネントを追加します。

パラメータ

動作

設定ファイル

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のAppRouterの場合、setupコマンドは適切なlayout.jsxファイル内で<T>コンポーネントを自動的に<GTProvider>コンポーネントでラップします。

さらに、next.config.jsファイル内にwithGTConfig Next.jsプラグインをセットアップします。

自動フォーマット

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