セットアップ

使用方法

npx gtx-cli setup

概要

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

このコマンドは、プロジェクトを最初に国際化する際に一度だけ実行する必要があります。 その後の変更では、プロジェクトを更新するために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のAppRouterを使用している場合、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を使用してコードベースに加えた変更を自動的にフォーマットします。